一
一、CSS简介
1.1、什么是CSS?
CSS(Cascading style sheets)：层叠样式表
CSS作用：给页面中的HTML标签设置样式
1.2、CSS语法规则
写在哪里？
css写在style标签中，style标签一般写在head标签里面，title标签下面；
怎么写？
利用css选择器
1.3、css初体验
常见属性：
color：文字颜色；
font-size：字体大小；
background-color：背景颜色；
width：宽度；
height：高度；
css标点符号都是英文状态下的；每一个样式键值对写完之后都需要加分号结尾；
<head> <style>p{/* 文本颜色 */color: red;/* 文字大小 */font-size: 30px;/* 背景颜色 */background-color: skyblue;/* 宽度 */width: 300px;/* 高度 */height: 300px;}</style>
</head>
<body><p>你好，世界</p>
</body>
1.4、CSS 引入方式
内嵌式：CSS写在style标签中
style标签虽然可以写在页面任意位置，但是通常约定写在head标签中；
外联式：CSS写在单独的一个.css文件中
需要通过link标签在网页中引入；
行内式：CSS写在标签的style属性中
配合js使用；
二、基础选择器
1、标签选择器
结构：标签名{css属性名:属性值;}
作用：通过标签名找到页面中所有这一类标签，设置样式
注意点：标签选择器选择的是一类标签，而不是单独某一个；
标签选择器无论嵌套关系有多深，都能找到对应的标签；
<head><style>p{color: red; }div{color:skyblue;}</style>
</head>
<body><p>我是一个p</p><p>我是一个p</p><div>我是div</div><div>我是一个div</div><div><div><div><p>我是一个p</p></div></div></div>
</body>
2、类选择器
结构：.类名{css属性名:属性值;}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
注意点：所有标签上都有class属性，class属性的属性值称为类名（类似于名字）；
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；
一个标签可以同时有多个类名，类名之间以空格隔开；
类名可以重复，一个类选择器可以同时选中多个标签；
<style>.red{color: red;}.yellow{color: yellow;}.pink{color: pink;}</style><body><p class="red big">小红</p><p class="red">小红2</p><p class="yellow">小黄</p><p class="pink">小粉</p>
</body>
3、id选择器
结构：#id属性值{css属性名:属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式；
注意点：所有标签上都有id属性；
id属性值类似于身份证号码，在一个页面中是唯一且不可重复的；
一个标签上只能有一个id属性值；
一个id选择器只能选中一个标签；
#one{color: purple;}#two{color:royalblue;}<div id="one">id选择器1</div><div id="two">id选择器2</div>
类与id的区别：
class类名与id属性值的区别：
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值；
类选择器与id选择器的区别？
类选择器以 . 开头；
id选择器以 # 开头；
实际开发的情况：
类选择器用的最多；
id一般配合js使用，除非特殊情况，否则不要使用id设置样式；
实际开发中会遇到冗余代码的抽取（将一些公共代码抽取到一个公共的类中）；
4、通配符选择器
结构：*{css属性名:属性值;}
作用：找到页面中所有的标签，设置样式；
注意点：开发中使用极少，只会在极特殊情况下才会用到；
在基础小页面中可能会用于去除标签默认的margin和padding;
*{color:seagreen;}<p>我是p</p><h1>我是h1</h1><div>我是div</div><span>我是span</span>
三、 字体和文本样式
1、字体样式
1.1、字体大小 font-size
属性名：font-size
取值：数字 + px
注意点：谷歌浏览器默认文字大小是16px;单位需要设置，否则无效；
1.2、字体粗细 font-weight
属性名：font-weight
取值：
关键字：normal 正常
bold 加粗
纯数字：100~900的整百数
400 正常
700 加粗
注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无变化；
实际开发中以正常、加粗两种取值使用最多；
1.3、字体样式 （是否倾斜） font-style
属性名： font-style
取值：正常 normal
倾斜 italic
1.4、常见字体系列
无衬线字体：（sans-serif）
特点：文字笔画粗细均匀，并且首尾无装饰；
场景：网页中大多采用无衬线字体；
常见该系列字体：黑体、Arial；
衬线字体：（serif）
特点：文字笔画粗细不均，并且首尾有笔锋装饰；
场景：报刊书籍中应用广泛；
常见该系列字体：宋体、Times New Roman;
等宽字体：（monospace）
特点：每个字母或文字的宽度相等；
场景：一般用于程序代码书写，有利于代码的阅读和编写；
常见该系列字体：Consolas、fira code
1.5、字体类型 font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4，.... ，字体系列
具体字体：微软雅黑、黑体、宋体、楷体等.....
字体系列：sans-serif、serif、monospace等.....
渲染规则：从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体；
如果都不支持，此时会根据操作系统。显示最后字体系列的默认字体；
注意点：如果字体名称中存在多个单词，推荐使用引号包裹；
最后一项字体系列不需要引号包裹；
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示
1.6、样式的层叠问题
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效；
p{/* 字体大小 */font-size: 30px;/* 字体粗细 */font-weight: 700;/* 字体样式 */font-style:italic;/* 字体类型 */font-family: 楷体;}<p>我是1个p</p> 
1.7、字体font相关属性的连写
属性名：font
取值：font：style weight size family
顺序要求：swsf（稍微舒服）
省略要求：只能省略前两个，如果省略了相当于设置了默认值；
注意点：如果需要同时设置单独和连写方式
要么把单独的样式写在连写的下面。要么 把单独的样式写在连写的里面；
p{/* 字体大小 */font-size: 30px;/* 字体粗细 */font-weight: 700;/* 字体样式 */font-style:italic;/* 字体类型 */font-family: 楷体;}div{font:italic 700 30px 楷体;}span{font:30px 楷体;}<p>我是1个p</p><div>我是一个div</div> <span>我是一个span</span> 
2、文本样式
2.1 文本缩进
属性名：text-indent
取值：数字 + px
数字 + em (推荐： 1em = 当前标签的font-size的大小)
2.2、文本水平对齐方式
属性名：text-align
left：左对齐
center：居中
right：右对齐
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
2.3、文本修饰
属性名：text-decoration
下划线：underline
删除线：line-throught
上划线：overline
无装饰线：none
开发中会使用text-decoration：none清除 a 标签默认的下划线；
2.4、水平居中方法总结
text-align:center;
text-align:center能让哪些元素水平居中？
文本、span标签、a标签、input标签、img标签
如果需要让以上元素水平居中，texttext-align:center;需要给以上元素的父元素设置；
margin：0 auto；
如果需要让div、p、h（大盒子）水平居中，可以使用margin：0 auto；实现；
如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可；
margin：0 auto；一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度；
3、行高
作用：控制行间距（给一行上下增加间距）
属性名：line-height
取值： 数字 + px / 倍数（ 当前标签font-size的倍数）
应用：让单行文本垂直居中可以设置line-height：文字父元素高度；
网页精准布局时，会设置line-height：1可以取消上下间距；
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题；
font：style weight size/line-height family
四、案例
<style>.box{width: 800px;/* height: 800px; *//* background-color: rgb(41, 106, 128); */margin: 0 auto;}h1{text-align: center;}.info{text-align: center;}.time{color: #808080;}.sina{color: #87ceeb;font-weight: 700;}.link{text-decoration: none;}p{text-indent: 2em;}</style><body><div class="box"><h1>《生命》</h1><div class="info"><span class="time">沈从文（1902—1988）</span><span class="sina">新浪科技</span><span class="link"><a href="#">收藏本文</a></span></div><hr><p>我好像为什么事情很悲哀，我想起“生命”。</p><p>……</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>明智者若善用其明智，即可从此云空中，读示一小文，文中有微叹与沉默，色与香，爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂，读者灵魂中如有音乐。虚空明蓝，读者灵魂上却光明净洁。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>然抽象的爱，亦可使人超生。爱国也需要生命，生命力充溢者方能爱国。至如阉寺性的人，实无所爱，对国家，貌作热诚，对事，马马虎虎，对人，毫无情感，对理想，异常吓怕。也娶妻生子，治学问教书，做官开会，然而精神状态上始终是个阉人。与阉人说此，当然无从了解。</p></div></body>
<style>body{background-color: #f5f5f5;}.box{width: 234px;height: 300px;background-color: #fff;margin: 0 auto;text-align: center;}.pic{width: 160px;}.product{font-size: 14px;height: 25px;}.info{font-size: 12px;color:#cccccc;height:30px;}.price{font-size: 14px;color: #ffa500;}</style><body><div class="box"><img src="../images/smallcar.jpg" class="pic"><div class="product">大号平衡车</div><div class="info">成年人的玩具</div><div class="price">1999元</div></div>
</body> 
