HTML笔记——④css样式表、选择器、常用属性
一 CSS1.1 CSS语法1.2 CSS样式表1.2.1 内部样式表1.2.2 外部样式表1.2.3 行内样式表1.3 CSS常用属性1.3.1 颜色1.3.2 CSS背景样式1.3.3CSS边框样式1.3.4 CSS文字样式1.3.5 CSS段落样式1.3.6 CSS复合样式二 CSS选择器2.1 元素选择符/类型选择符(element选择器）2.2 class选择器/类选择器2.3 ID选择器2.4 通配符/通配选择器2.5 群组选择器2.6 层次选择器——后代选择器2.7 伪类选择器2.8 选择器的权重三 CSS常用属性3.1 文本属性3.2 列表属性3.3 背景属性3.4 浮动属性四 盒子模型4.1 盒子模型例图一 CSS
Cascading Style Sheet层叠样式表，用于修饰网页信息的显示样式，目前推荐遵循的是W3C发布的CSS3.0.
CSS实现内容与样式的分离，便于团队开发、维护
1.1 CSS语法
每个CSS样式由两部分组成：选择符和声明，声明又分为属性和属性值；属性必须放在{}中，属性与属性值用:连接。每条声明用;结束。当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。在书写样式过程中，空格、换行等操作不影响属性显示。选择器 { 属性1 : 值1 ; 属性2 : 值2 }
1.2 CSS样式表
CSS样式表分为内部样式表、外部样式表、行内样式表
同一标签的同一属性优先级是最近原则 可以添加!important改变优先级
1.2.1 内部样式表
格式：<style></style>一般放在<head>中便于区分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:100px;height:100px;background-color: red;}</style></head><body><div>区域块</div><span>内联</span></body></html>
1.2.2 外部样式表
引入一个单独的CSS文件，后缀是.css通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。或者通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )
<link rel="stylesheet" type="text/css" href="css/index.css" /><style>@import url(css/index.css);</style>
扩展知识点：link和import之间的区别
本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
1.2.3 行内样式表
<h1 style="color:red;">11111111111111-aaa</h1>
1.3 CSS常用属性
1.3.1 颜色
单词表示法 : red blue green yellow …<style>div{background-color:red;}</style>
十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法：rgb(255,255,255);
取值范围 0 ~ 255
获取颜色的工具：
提取颜色的下载地址
photoshop工具
1.3.2 CSS背景样式
background-color 背景色
background-image 背景图
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺，默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:2000px;height:2000px;background-image:url(./图片合集/QQ截图1022195509.png);background-repeat:repeat-x;}</style></head><body><div></div></body></html>
1.3.3CSS边框样式
border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …
边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色：透明颜色 transparent
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div1{width:300px;height:300px;border-style: dotted;border-color: red;border-width: 20px;}#div2{width:300px;height:300px;border-right-style: dotted;border-right-width: 10px;border-right-color: blue;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>
1.3.4 CSS文字样式
font-family : 字体类型
英文、中文
衬线体、非衬线体
注意点：
1.多个字体类型的设置目的
2.引号的添加的目的
font-size : 字体大小
默认 : 16px
写法 : number(px) | 单词 ( small large … 不推荐使用)
font-weight : 字体粗细
模式： 正常( normal ) 加粗 ( bold )
写法：单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )
font-style : 字体样式
模式： 正常 ( normal ) 斜体 ( italic )
写法：单词 ( normal 、 italic )
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
1.3.5 CSS段落样式
text-decoration：文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写 （ 针对英文段落 ）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent : 文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align : 文本对齐方式
对齐方式 : left 、right、center、justify（两端点对齐）
line-height : 定义行高
什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
etter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题：
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)
<style>p{width:300px;text-decoration: underline overline;}</style>
1.3.6 CSS复合样式
复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
二 CSS选择器
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
2.1 元素选择符/类型选择符(element选择器）
语法：元素名称{属性:属性值;属性:属性值;}当统一文档某个元素的显示效果时，可以使用类型选择符（如：改变文档所有p段落样式）
2.2 class选择器/类选择器
语法:..class名{属性:属性值;}class="class名"
用法：
class选择器更适合定义一类样式；
class选择器是可以复用的。
可以添加多个class样式。
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
2.3 ID选择器
格式：#id名{}id="id名"
用法：
ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。且不能多个使用
命名的规范：由字母、下划线、中划线、数字（并且第一个不能是数字）
2.4 通配符/通配选择器
格式：*{属性：属性值；}*{margin: 0;padding: 0;}
用法：去掉所有标签的默认样式时，主要用于外边距（margin）、内边距（padding）的设置；尽量避免使用通配选择器，因为会给所有的标签添加样式。
2.5 群组选择器
语法：可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式选择符1,选择符2,选择符3……{属性:属性值;}例:div, h1{width:960px;}
用途：当有多个选择符应用相同的声明时，可以将选择符用,分隔的方式，合并为一组
2.6 层次选择器——后代选择器
语法：选择符1 选择符2{属性:属性值;}后代 M N { }父子 M > N { }兄弟 M ~ N { } 当前M下面的所有兄弟N标签相邻 M + N { } 当前M下面相邻的N标签
用法：选择符1中包含的所有选择符2；
如:结构:
<ul class="list"><li></li><li></li><li></li></ul>样式:. list li{background:red;}
2.7 伪类选择器
语法：a:link{属性：属性值；}超链接的初始状态；( 只能添加给a标签 )a:visited{属性：属性值；}超链接被访问后的状态；( 只能添加给a标签 )a:hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态；(可以添加给所有的标签)a:active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态；(可以添加给所有的标签)
说明：应注意他们的顺序，正常顺序为：a:link、a:visited、a:hover、a:active；为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如:a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样,鼠标划过的状态和点击时的状态一样。
2.8 选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
CSS选择器解析规则：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式；相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。
三 CSS常用属性
3.1 文本属性
常用字体
宋体SimSun黑体SimHei
微软雅黑MicrosoftYaHei微软正黑体MicrosoftJhengHei
新宋体NSimSun新细明体PMingLiU
细明体MingLiU标楷体DFKai-SB
仿宋FangSong楷体KaiTi
仿宋_GB2312FangSong_GB2312楷体_GB2312KaiTi GB2312
3.2 列表属性
3.3 背景属性
rgba(255,0,0,0)的a是透明效果，范围是0~1fix要注意始终相对浏览器页面，要保证在盒子内，否则无法显示
top和bottom、left和right同时存在的时候，left、top优先级最高（无论class、style、import）
3.4 浮动属性
浮动属性遵循见缝插针原则，文字会靠外显示
解决高度塌陷问题也可以通过规定高度解决，height: 200px;可以在下一个盒子上清除浮动也可以再设置一个清除浮动的空盒子<div style="clear: both;"></div>引发bfc，让浮动元素计算高度，overflow:hidden
四 盒子模型
4.1 盒子模型例图
4.2 margin
margin是外边距的意，
当一个元素样式属性里有margin:0 auto时，并且父元素的宽度是确定的，
意思是这个元素处于其父元素的居中位置，并且这个元素的上下外边距为0
即:上下外边距为0，左右自动，实际效果为左右居中
补充:
margin为外边距，及边框外到外部容器的距离，有四种参数设置方式：
margin:5px;/四边外边距都为5px/
margin:5px 10px;/上下外边距5px，左右外边距10px/
margin:5px 10px 15px;/上外边距5px，左右外边距10px，下外边距15px/
margin:5px 10px 15px 20px;/顺时针方向：上5px，右10px，下15px，左20px/
margin:0 auto;/上下外边距为0，左右自动，实际效果为左右居中/
