一
一、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> 
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
