1. 概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
行内式：
在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；
嵌入式：
在页面中嵌入 < style type="text/css"> 块
Titlediv{
background-color:darkgrey;
height: 100px;
width:100px;
}
链接式：
将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中
1
2
3
Title4
5
导入式：
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，
1
2
3
Title4
5 @import"mystyle.css"; #此处要注意.css文件的路径
6
7
注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式
2. CSS选择器
2.1 基础选择器
2.1.1 通用元素选择器
通用元素选择器，匹配任何元素
1 *{2 color: darkgrey;3 }
2.1.2 标签选择器
匹配所有使用XX标签的元素；
例如，需要选择所有标签为div的元素设置样式
1 div{2 color: grey;3 background-color: antiquewhite;4 }
2.1.3 class选择器
.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；
页面color: grey;
background-color: antiquewhite;
}
我是p标签
2.1.4 id选择器
#info或E#info :id属性选择器，匹配所有id属性等于info的元素
页面#cs1{
color: grey;
background-color: antiquewhite;
}
我是p标签
2.2 组合选择器
2.2.1 多元素选择器
E,F：多元素选择器，同时匹配所有E标签元素或F标签元素，E和F之间用逗号分隔
页面div,p{
color: grey;
background-color: antiquewhite;
}
我是p标签
SPAN
2.2.2 后代元素选择器
E F：后代元素选择器，匹配所有属于E标签元素后代的F标签元素，即所有类似形式的所有后代，子子孙孙，E和F之间用空格分隔;
页面div p{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.2.3 子元素选择器
E > F ：子元素选择器，匹配所有E元素的子元素F，只匹配到子元素，子元素的子元素匹配不到;
页面#outer>.c1{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
#outer>.c1{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.2.4 毗邻元素选择器
E + F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F ，即只匹配挨着的下一个F元素，如不相邻也不起作用;
页面#outer+.c1{
color: grey;
background-color: antiquewhite;
}
我是p1标签
我是p2标签
我是p3标签
2.3 属性选择器
根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
页面input[name="Hello"]{width:20px;height:20px}
>
3. 常用属性
3.1 颜色属性
color：
①英文单词形式，例如：red，yellow
②编码形式，例如：#cc3399，如双重可简写#c39
③基调颜色透明度设置，例如：rgb(255,255,255,0.5)，red、green、blue三色透明度设置,最后一个值设置透明度
3.2 字体属性
font-size: 20px/50%/larger 设置字体大小；
font-family:'Lucida Bright' 文本的字体系列；
font-weight: lighter/bold/border/ 字体的粗细；
font-style:normal/oblique/italic 文本的字体样式；
3.3 背景属性
font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 238);">background-image: 背景图片；
background-repeat：平铺方式，no-repeat 不平铺，repeat 平铺满；
background-size: 图片大小设置，auto；
background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；
Title3.4 文本属性
text-align：center 文本居中
line-height：xxpx；行高 ，针对文本处理
width：xxpx；宽 %50
height：xxpx；高 %50
text-indent：xxpx 首行缩进，基于父元素
letter-spacing：xxpx；字母与字母之间距离
word-spacing：xxpx ；单词之间距离
direction：rt1
text-transform：capitalize；将单词首字母大写
min-height:设置默认最小高度
height：auto！important 以此样式为准
vertical-align：xxpx;垂直居中
opacity：0.3 透明度
3.5 CSS样式边框
border-style：solid；边框样式
border-color：red；边框颜色
border-width：1px；边框宽度
border-radius：20%；边框变成圆角
3.6 CSS样式浮动
正常文档流：将元素(标签)在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；
float 浮动标签属性(非完全脱离)：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。
float：left，right，both
清除浮动： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
1
2 #div4{
3 border:solid 1px lavender;4 background-color: rebeccapurple;5 height: 100px;6 }7 #div1{
8 background-color: darkolivegreen;9 height: 100px;10 width: 980px;11 margin: auto;12 }13 #div2{
14 border-left: solid 1px lavender;15 height: 100px;16 width: 100px;17 background-color: darkgray;18 float: left;19 }20 #div3{
21 border-left: solid 1px lavender;22 height: 100px;23 width: 100px;24 background-color: darkgray;25 float: left;26 }27 #clear{
28 clear:both;29 }30
31
32
33
34
35
36
37
注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动
清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏
overflow：auto;不光隐藏并出现滚动条
3.7 CSS样式display
块级标签和行内标签相互转换
1
2
3 行内
4
注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
1
2 行内
3
4
注：display:inline-block 既有inline的属性(默认自己有多少占多少)又有block的属性(可以设置高度、宽度、padding、margin)
3.8 CSS样式边距
外边距margin
1
2
3
5
6
内边距padding
1
2
3
5
6
4 其他
4.1 position
4.1.1 介绍
Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。
1、主要的值：
①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
④static ：默认值；默认布局。
2、辅助属性：
position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：
①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。
②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。
③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。
④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。
上面属性的值可以为负，单位：px 。
4.1.2 定位方式
position:absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于；
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
positon:relative
相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
一般与absolute配合使用；
position:fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
4.2 hover
适用于光标(鼠标指针)指向一个元素，但此元素未被激活时的样式.
4.3 overflow
overflow属性指定如果内容溢出一个元素的框，会发生什么。
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
4.4 z-index
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
4.5 opacity
设置一个div元素的透明度级别：0-1
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
