Css知识点

来源：互联网发布：mt4软件使用编辑：程序博客网时间：2024/05/22 04:04

Css 层叠样式表

Body a .box{}

目的：html结构和css样式分离

语法

选择器{属性名:属性值;属性名:属性值; }

说明：

1.一个css样式包括选择器和格式声明语句

2.选择器就是选择给哪个html标签加样式

3.属性名:属性值;

4.属性值不用双引号

5.单位通常以px为单位，通常情况必须带单位

css样式带单位，html不带单位

如何引入css样式

1.行内样式表

每一个标签都有style属性

<标签 style="属性名:属性值;"></标签>

2.内嵌样式表

在head标签中输入xhtml

<head>

color:red; /*文本颜色*/

font-size:14px;

}

</style>

</head>

3.外部样式表

保存的时候拓展名为.css文件

4.导入样式表

格式：@import url(另外一个css样式)

@import url(XX.css)放在第一行

必须放到css文件中

选择器分类

1.基本选择器

1.1标签选择器：选择给哪个标签加样式，自动指向该标签

body{ } p{ }

1.2类选择器

.myclass{} .page_header{ } .login_content_input{ }

用时:<ul class="ul_two"> <h2 class="ul_two">

类选择器可以引用多次

1.3id选择器

给特定的html标签加样式

#myid{ } #id1{ } #checkform1{ }

id选择器只能引用一次，通常给js用，不是用来设置样式的

1.4通用选择器

给所有的标签加样式

*{ }

IE6不支持

2.复合选择器

2.1多元素选择器

多个标签共有的属性和属性值放在一起

选择器，选择器，选择器{共有属性:属性值;}

2.2后代元素选择器

给html的后代标签加样式

选择器1 选择器2 {属性:属性值;}

选择器1里面的选择器2

2.3子元素选择器

给html标签的子标签加样式

选择器>选择器{属性:属性值;}

适用于只有一层的关系

伪类:--锚<a>内容必须做好链接

a:link 未访问的链接

a:visited 访问过的链接

a:hover 鼠标移动连接上

a:active 单击鼠标左键那一时刻的样式

文本属性

 font-size 文本的大小例如 font-size:12px;

 font-weight 文本是否加粗 font-weight:bold///normal ;

 font-style 文本是否倾斜 font-style:italic ;倾斜 font-style:normal;正常

 font-family:文字的字体例如 font-family:隶书; 默认是宋体

 text-decoration 文本是否有线条 text-decoration:underline ;下划线， text-decoration:overline; 上划线 text-decoration:line-through;删除线 text-decoration:none;去掉所有的线条

 text-indent:文本首行缩进例如 text-indent:2em;

 color 文本的颜色例如color:red;

 letter-spacing:字母和字母之间的距离例如letter-spacing:2px;

 word-spacing:单词和单词之间的距离例如 word-spacing:2px;

 text-align:文本的对齐方式 left center right 例如 text-align:center;

背景属性

backgraoud-color 背景颜色

background-image 背景图片

background-repeat 背景图片是否平铺

no-repeat 不平铺

repeat-x 横向平铺

repeat-y 纵向平铺

repeat 都平铺

background-position 背景图片位置

left

center

right

top

center bottom

数值正负

background-position:背景颜色背景图片是否平铺 (附件) 水平垂直;

例如 background-position:0 0;

backgroud-(attachment 背景附件，背景是否随着上方内容一起移动

取值：fixed 背景固定 scroll 滚动

body{

background:url(images/bg.jpg) repeat-y fixed center 20px;

}

注意：只有水平和垂直不能颠倒，其他属性值可以顺序颠倒

列表

去掉前面的项目符号

list-style:none;

ul,ol{

/* list-style-type:none; 有序和无序前面的项目符号*/

list-style:none;

/*用小图代替列表前的符号*/

list-style-image: url(images/protitle.jpg);

}

</style>

表格

table{

width:800px; /*表格的宽度*/

border:1px solid blue;/*边框线1像素实线颜色为蓝色*/

border-collapse:collapse; /*合并表格的边框线*/

}

td{

border:1px solid blue;/*单元格的边框线 1像素实线蓝色*/

}

</style>

边框

.box_one{

width:500px;

height:300px;

/* border-top-width:1px;

border-top-color:blue;

border-top-style:solid;*/

border-top:1px solid blue;/*上边框粗细为1像素实线颜色为蓝色*/

border-right:2px solid red;

border-bottom:1px dashed gray; /*下边框的粗细为1像素虚线灰色*/

border-left:1px dotted gray;

}

.box_hao{

width:998px;

height:48px;

border-top:2px solid #208c82; /*上边框粗细为2像素实线颜色为绿色*/

border-bottom:1px solid #a0a0a0;

}

.box_hao_two{

width:500px;

height:300px;

}

.box_hao_three{

width:100px;

height:50px;

}

.box_hao_two,.box_bao_three{

border:1px solid gray;

}

</style>

上边框

1.Border-top-color:颜色值;上边框的颜色

2.Border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线

3.Border-top-width:粗细；例如border-top-width:2px;

简写为

Border-top:粗细线型颜色;

右下左边框同理

盒子模型

1.内容区:width和height

2.边框 border

3.内边距　padding

3.1 padding-top

3.2 padding-right

3.3 padding-bottom

3.4 padding-left

简写形式 padding:10px 20px 30px 40px;

上右下左

4.外边距 margin

3.1 margin-top

3.2 margin-right

3.3 margin-bottom

3.4 margin-left

5.浮动 float

特点:设置浮动的元素不占空间

设置浮动的元素层级高于普通元素

在一行中的元素横向排列都要设置浮动

盒子在页面水平居中:margin:auto;

清除格式

*{margin:0;padding:0;}

如果后期使用再重新设置

body,div,h2,ul,li{

margin:0;

padding:0;

}

网页的布局思想

1.清除格式

2.设置页面属性

body{

font-size:14px;

font-family:"宋体";

color:#000000;

background-color:#e2e2e2;

line-height:150%;

}

行内元素和块元素

行内元素：输入完标签之后，不是自己独占一行

宽和高由内容决定，width height不能用

--css样式:display:inline

span b i u strong a

块元素：输入完标签自己独占一行

可以设置宽度高度

div p h1 table ul li ol dl dt dd

块-行内转换

display:inline

行内-块转换

display:block

Overflow

内容溢出时使用的属性

overflow:hidden;隐藏溢出部分

overflow:auto;如果盒子装不下出现滚动条

overflow:scroll;不论能否装下都有滚动条

继承

外层元素的样式会被里面的元素继承使用

优先级

单个选择器优先级

标签<类<id

复合选择器优先级

.box ul li{}<.box.ont.two ul li{}<#myid ul li{}

清除浮动

clear:left/right/both;

div里面还有<div>父盒子没有设置固定高，里面设置了浮动，父元素受影响，无法正常计算

--如何让父元素得到自然高?

1.在父盒子最下面加<div>给div设置清除浮动属性;

2.浏览器的bug-在父元素样式加overflow:hidden;

margin距离

1.不浮动取最大值

2.浮动相加

定位

position:static默认/fixed固定/relative相对位置/absolute绝对定位

fixed：相对于浏览器窗口定位

不设置定位坐标就在原来位置

层级比普通标签高

固定定位之后一定是块元素

relative：如果结合定位坐标，相对【自身】，作为参考点

 层级要高于普通的元素

absolute：设置绝对定位，不占空间

设置层级高于普通的元素

不结合定位坐标，就是在原来的位置

绝对定位如果定位坐标，以祖先元素（设置绝对定位，相对定位）作为坐标的参考点

如果祖先没有设置定位，一直往上找，直到找到body,就以body来进行定位，相对于整个窗口来进行定位

Html5介绍

-html-xhtml版本-w3c和whatwg-->html5

-html5=html5+css3+js+api

-特点：

代码更加简洁

标签语句语义化

新增属性

代码更加宽松

-ie9以上支持html5

-html5的结构

<<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>>

-代码更加宽松

向下兼容-html可以把所有标签看成双标签

-html5新增的标签

<header></header>网页头部

<nav></nav>网站导航

<section></section>代表网页的一个块类似div

<article></article>网页的文章内容

<aside></aside>网页文档的侧边栏

<footer></footer>代表网页的页脚

<body>

</section>

</body>

html5新增的type属性值

用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱/账号" required="required">

placeholder="内容" 输入框的提示信息

required="required" 必须填写

autofocus="autofocus" 自动获取焦点到输入框

html5新增的表单属性

邮箱<input type="email" name="emailc">

限定输入的必须是email类型

url<input type="url" name="address">

限定输入的必须是url类型

用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱/账号" required="required" autofocus="autofocus"><br>

邮箱:<input type="email" name="emailc"><br>

网站地址:<input type="url" name="address"><br>

日期:<input type="date" name="dat"><br>

周:<input type="week" name="we"><br>

面包:<input type="number" name="mianbao">个<br>

颜色:<input type="color" name="co"><br>

亮度:<input type="range" name="ran"><br>

搜索:<input type="search" name="searchnew">

视频：

</video>

音频：

</audio>

Css3

Css2+新语法

对css2进行扩充删减优化

属性选择器

E-element元素 data-属性

E[data] 选择带有data属性的元素对象，给该元素对象加样式

E[data=”one”] 选择带有data属性的元素对象，并且属性值等于one的加样式

E[data^=”o”] 选择器带有data属性的元素对象，并且属性值以o开头的 ^开头

E[data$=”e”] 选择器带有data属性的元素对象，并且属性值以e结尾的 $结尾

E[data*=”n”] 择器带有data属性的元素对象，并且属性值包含n，*包含

<!DOCTYPE html>

<head>

<title>Document</title>

/* .box li[class]{ 带有class属性的给加颜色为红色

color:red;

}*/

/*.box li[class="col-one"]{

color:red;

font-size:14px;

}*/

/* .box li[class^="t"]{

color:blue;

}

.box li[class$="e"]{

color:red;

} */

li[class*="col-"]{

color:red;

}

</style>

</head>

<body>

<ul>

<li class="four">bootstrap</li>

<li class="col-one">javascript</li>

<li class="col-two">mysql</li>

<li id="col-md">jquery</li>

</ul>

</div>

</body>

</html>

伪类结构

E---element元素

E:first-child{ } 第一个孩子

E:last-child{ } 最后一个孩子

E:only-child{ } 只有一个孩子

E:nth-child(n){ } 第n个孩子 n=1 2 3 4 5 … li:nth-child(3){ }

E:nth-child(2n+1)

E:nth-child(odd) 获得奇数孩子，n=1 3 5 7 …

E:nth-child(2n){ }

E:nth-child(even){ } 获得偶数孩子 n=2 4 6 8

伪元素

E:first-letter 设置第一个文字

E:first-line 第一行文字

E:after 盒子里面插入的内容在盒子的里面的后面

E:before 在盒子插入内容，在盒子里面的最前边

文本阴影

Text-shadow:水平垂直模糊强调颜色；

正值右侧负值左侧

垂直正值下负值上

可以有多组值，之间用逗号相隔

盒子阴影

Box-shadow：水平垂直模糊尺寸颜色内外阴影inset；

默认是外阴影但是如果是外阴影不加outset

如果有多组值中间用逗号相隔

水平正值是右侧负值左侧

垂直正值下面负值上面

盒子变成圆角：border-redius:50%;

设置半透明颜色

Color:rgba(255,0,0,0.3)

Background:rgba(0,0,0,0.6)

背景图片的尺寸

Background-size：宽度高度;例如:background-size: 400px 500px;

Background-size:cover;

背景图片会把整个盒子（宽度和高度）都用背景覆盖上

Background-size:contain

背景图片会把盒子的宽度或高度覆盖就停止

阅读全文

0 0