寒假集训
二十四、选择器
为什么要用选择器？
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
1.标签选择器
元素选择符/类型选择符（element选择器）如: div{width:100px; height:100px; background:red;}
语法:元素名称{属性:属性值; }如: div,p,h1,img,a,span,i,em,strong,b,ul,ol,li…等
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、 div、p,img,em,strong，span…等。
b)所有的页面元素都可以作为选择符;
用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符;
(如：改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果吋，可以使用类型选择符
(如：改变文档所有p段落样式)
2.类选择器
class选择器/类选择器
语法: .class名{属性: 属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是:
如: <div class= "top"> </div>
.top{width:200px; height:100px; background:green;}
用法: class选择符更适合定义一类样式;
3.id选择器
id选择器
语法:：#id名{属性:属性值;}
说明:
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如：<div id= "box"> </div>
B) id选择符的语法格式是"#” 加上自定义的id名
如：#box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字: (所有的标记和属性都是关键字)
如：head标记
D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)
4.通配符选择器
*通配符/通配选择器
语法：*{属性: 属性值; }
说明：通配选择符的写法是"*” ，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值；
5.群组选择器
群组选择器
语法：选择符1,选择符2,选择符3…{属性:属性值} 例: #top1,#nav1,h1 {width:960px;}
说明：当有多个选择符应用相同的声明时，可以将选择符用", ”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
6.后代选择器
包含选择器/后代选择器
语法：选择符1 选择符2 {属性:属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：
<ul class= "list">
<li> </li>
<li> </li>
<li> </li>
</ul>
样式：.list li{background:red;}
7.伪类选择器
伪类选择器
语法:
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;)超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。
说明:
A) 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:
a:link,a:visited,a:hover,a:active，错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样， 鼠标划过的状态和点击时的状态一样。
二十五、选择器的权重
当多个选择器，选中的是一个元素，且都为他们定义了样式，如果属性发生了冲突，会选择权重高的来执行
| 个数 | 选择器 | 权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0 |
|---|---|---|
| 1 | 类型（元素）选择器 | 0001 |
| 2 | Class选择器（类选择器） | 0010 |
| 3 | id选择器 | 0100 |
| 4 | 包含选择符 | 为包含选择符的权重之和 |
| 5 | 内联样式 | 1000 |
| 6 | !important | 10000 |
CSS选择器解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
CSS选择器解析规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。
二十六、文本属性
| 个数 | 属性 | 描述 | 说明 |
|---|---|---|---|
| 1 | font-size | 字体大小 | 单位是px，浏览器默认是16px,设计图常用字号是12px |
| 2 | font-family | 字体 | 当字体是中文字体、英文字体中有空格时，需加双引号; 多个字体中间用逗号链接先解析第1个字体，如果没有解析第2个字体,以此类推 |
| 3 | color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0); 0-255 |
| 4 | font-weight | 加粗 | font-weight:bolder(更粗的)/bold (加粗) /normal (常规) font-weight: 100-900; 100- 500不加粗600- 900加粗 |
| 5 | font-style | 倾斜 | font- style: italic(斜体 字)/oblique(倾斜的文字)/normal (常规显示) ; |
| 6 | text-align | 文本水平对齐 | text- align:left;水平靠左 text- align: right; 水平靠右 text-align: center; 水平居中 text- align:justify;水平2端对齐，但是只对多行起作用。 |
| 7 | line-height | 行高 | line-height的数据=height的数据，可以实现单行文本垂直居中 |
| 8 | text-indent | 首行缩进 | text-indent可以取负值;text-indent属性只对第一行起作用 |
| 9 | letter-spacing | 字间距 | 控制文字和文字之间的间距 |
| 10 | text-decoration | 文本修饰 | text-decoration:none没有/underline下划线/overline上划线/line- through删除线 |
| 11 | font | 文字简写 | font是font- style font-weight font-size / line-height font- family的简写。 font:italic 800 30px/80px “宋体” ;顺序不能改变，必须同时指定font-size和font- family属性时才起作用 |
| 12 | text-transform | 大小写 | capitalize首字母大写 lowercase全部小写 uppercase全部大写 none |
二十七、列表属性
| 个数 | 属性 | 描述 | 说明 |
|---|---|---|---|
| 1 | list-style-type | 定义列表符合样式 | list- style-type:disc(实心圆)circle(空心圆)/square(实心方块)/none(去掉符号) |
| 2 | list-style-image | 将图片设置为列表符合样式 | list-style- image:url(); |
| 3 | list-style-position | 设置列表项标记的放置位置。 | list-style-position: outside; 列表的外面默认值 list-style-position: inside; 列表的里面 |
| 4 | list-style | 简写 | list-style:none;去除列表符号 |
二十八、背景属性
| 个数 | 属性 | 描述 | 说明 |
|---|---|---|---|
| 1 | background-color | 背景颜色 | background-color: red; |
| 2 | background-image | 背景图片 | background-image:url(); |
| 3 | background-repeat | 背景图片的平铺 | background-repeat:no-repeat/repeat/repeat-x/repeat-y; |
| 4 | background-position | 背景图片的定位 | background-position:水平位置垂直位置; 可以给负值 |
| 5 | background- attachment | 背景图片的固定 | background-attachment : scroll (滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) ; |
可以简写成background：
- 用空格隔开
- 顺序可以换
- 可以只取一个值，放在后面能覆盖前面的值
background-size属性只能单独用
二十九、浮动属性
| 个数 | 属性 | 描述 | 说明 |
|---|---|---|---|
| 1 | float | float: left; | 元素靠左边浮动 |
| 2 | float | float: right; | 元素靠右边浮动 |
| 3 | float | float: none; | 元素不浮动 |
| 4 | clear | Clear: none; | 允许有浮动对象 |
| 5 | clear | Clear: right; | 不允许右边有浮动对象 |
| 6 | clear | Clear: left; | 不允许左边有浮动对象 |
| 7 | clear | Clear:both; | 不允许有浮动对象 |
浮动的作用1：
定义网页中其它文本如何环绕该元素显示
浮动的作用2：
就是让竖着的东西横着来
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
三十、盒子模型
内边距
1个值，4个方向一样
2个值，上下，左右
3个值，上 左右 下
4个值，上 右 下 左
内边距特性
- 背景色蔓延到内边距
- 可以设置单一方向
边框
样式：solid double dashed dotted
背景色 也能蔓延到边框
外边距
margin-方向 4个方向
背景色不蔓延
支持外边距负值
屏幕居中：margin:0 auto; 横向居中
扫一扫
4271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
