一、CSS简介
1、CSS是什么
- CSS 指层叠样式表 (Cascading Style Sheets)
- CSS是一组样式设置的规则，用于控制页面的外观样式（如段落、图片等）
- 样式通常保存在外部的 .css 文件中
2、CSS发展史
- 1996年12月W3C推出了CSS规范的第一个版本CSS1.0，这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
- 1998年W3C发布了CSS的第二个版本即CSS2.0，这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
- 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。
- 早在2001年5月W3C开始进行CSS3标准的制定，虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。
3、CSS的作用
- CSS是网页的美容师（因为HTML只能做简单的样式）
- CSS的使用可以使网页的结构（HTML）与样式（CSS）相分离，便于团队开发
- CSS可以让样式复用，利用后期维护
二、CSS基本用法
1、CSS语法
- css语法规则由两部分构成：① 选择器；② 一条或多条声明
- css语法用{}括起来，以分号（;）结尾
选择器 {
属性名：属性值;
}
h2 {
/*字体大小为20px*/
font-size:20px;
}
- 选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值 - 同时，CSS书写时，通常用一行描述一个属性，有利于增强代码的可读性
2、CSS的三种引入方式
（1）内部样式表（Internal style sheet）
- 其是写到html页面内部，将所有的CSS代码抽取出来，单独放在一个
style标签中。
<!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>
h2 {
font-size: 20px;
}
p {
color: pink;
}
</style>
</head>
<body>
<h2>蓝旭</h2>
<p>培训</p>
</body>
</html>
- 代码结构清晰，但并没有实现结构与样式完全分离。
- 当单个页面需要特殊的样式时，就应该使用内部样式表。
（2）外部样式表(External style sheet)
- 样式单独写到CSS文件中(文件后缀名为
.css），之后将CSS文件引入到HTML页面中使用，每个页面使用<link>标签链接到样式表。 - 适用于某个样式应用于多个页面（如导航栏）的情况，此种方法也是最常见的引入CSS的方式。
（3）内联样式(Inline style)
- 在元素标签内部的style属性中设定CSS样式，适合于修改简单样式
<!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>
h2 {
font-size: 20px;
}
p {
color: pink;
}
</style>
</head>
<body>
<h2>蓝旭</h2>
<p style="color: skyblue">培训</p>
</body>
</html>
思考：在上述例子中，对于p标签，我同时使用了内联样式和内部样式表去控制它的字体颜色，所以最后“培训”这两个字到底是蓝色还是粉色呢？
答案是蓝色。这里涉及到几种样式表的优先级：
多重样式优先级:内联样式 > 内部样式>外部样式> 浏览器默认样式
三、CSS选择器
CSS选择器有很多，可以参考CSS选择器手册
1、基础选择器：由单个选择器组成
（1）标签选择器
- 用HTML标签名称作为选择器，按标签名称分类，又叫元素选择器。
语法：
标签选择器 {
CSS样式
}
- 优点：能够快速为页面中同类型的标签统一设置样式
- 缺点：不能设计差异化样式，只能选择全部的当前标签
（2）类选择器
- 以
.号作为前缀，自定义类名；再通过HTML标签的class属性调用类选择器
.fruit {
color:pink;
}
<div>
<span class="fruit">苹果</span>
<span class="fruit">草莓</span>
<span class="fruit">香蕉</span>
</div>
- 多类名：在标签属性中写多个类名，要用空格隔开
//多类名的使用一般是公共类和私有类，比如fruit是公共类，是一些标签元素的样式，而apple是该标签独有的一个类，有自己独有的的样式。
//可以节省CSS代码，方便统一修改
<span class="fruit apple">苹果</span>
- 注意：
类选择器在调用时不能加.号
类选择器的命名：不要使用纯数字、中文等命名，用英文字母表示
（3）id选择器
- 以
#为前缀，自定义名称，通过HTML标签的id属性进行名称匹配
#one{
color:orange
}
<ul>
<li id="One">一</li>
<li id="Two">二</li>
<li id="Three">三</li>
</ul>
类选择器和id选择器的比较
- 相同点：它们都可应用于所有元素
- 不同点：
（1）在一个文档中，id选择器只能使用一次，即整个html中，命名为One的id选择器只能有一个；但类选择器可以使用多次，可以有多个
（2）一个标签可以有多个类名，但不可有多个id名
（4）通配符选择器
- 用
*定义，用于选取页面中的所有元素（标签）；通配符不需要调用，一般不使用这个。 - 但是在每一个页面中的外部样式表
.css中都可以使用以下代码，其作用是清除浏览器默认样式
*{
padding:0;
margin:0;
}
2、复合选择器
（1）子选择器
- 语法：用
>选择指定标签元素的第一代子元素，即 元素1>元素2 {}
.fruitAll > span {
color:pink;
}
.fruitTwo>#apple {
color: red;
}
//三个标签都是粉色
<div class="fruitAll">
<span>苹果</span>
<span>草莓</span>
<span>香蕉</span>
</div>
//只有苹果的是红色
<div class="fruitTwo">
<span id="apple">苹果 </span>
<span>草莓</span>
<span>香蕉</span>
</div>
（2）后代选择器
- 其又称为包含选择器，用空格相隔，用于指定标签元素的后代元素
- 语法：元素1 元素2{}
ul li {
font-size: 10px;
}
<!-- 后代选择器 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
子选择器和后代选择器的区别
- 子代选择器选择它的第一代元素，而后代选择器选择它所有的后代元素
ul li a {
color: red;
}
/* 此时li内的所有a标签都变为红色了 */
ul li>a {
color: blue;
}
/* 此时只有一级菜单的a标签变为蓝色，二级的不受影响; */
<!-- 后代选择器与子代选择器的区别 -->
<ul>
<li>
<a>一级菜单</a>
<a>一级菜单</a>
<div>
<a>二级菜单</a>
<a>二级菜单</a>
</div>
</li>
</ul>
（3）并集选择器
- 选取多组标签，定义相同的样式，用
,隔开；减少冗余的代码 - 语法：元素1，元素2{}
.one,.two {
font-size: 30px;
}
<!-- 并集选择器 -->
<div class="one">
<span>一</span>
</div>
<p class="two">二</p>
（4）伪类选择器
- 它允许给html不存在的标签（标签的某种状态）设置样式，如给html中的某个p标签元素的经过它的状态设置颜色，如p本身颜色为红色，当鼠标经过p标签时，p标签里面的字体颜色变为粉色
p {
color: red;
}
p:hover {
cursor: pointer;
color: pink;
}
<!-- 伪类选择器 -->
<p>经过</p>
- 链接伪类选择器
/* 未访问的链接 */
a:link {
color: pink;
}
/* 已访问的链接 */
a:visited {
color: blue;
}
/* 鼠标移动到链接上 */
a:hover {
color: green;
}
/* 选定的链接 */
a:active {
color: gray;
}
四、CSS三大特性
1、层叠性
- 相同选择器设置相同的样式，一个样式就会覆盖（层叠）另一个冲突的样式）
- 就近原则，后来居上
/*最后的字体颜色是skyblue*/
div {
color: pink;
font-size: 10px;
}
div {
color: skyblue;
}
<div>层叠性</div>
2、继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号；可继承的属性参考
3、优先级
- 当同一个元素指定多个选择器，就产生了优先级
- 选择器的优先级依次是:
!important>内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
!important使某个样式有最高的优先级，!important要写在分号的前面
div p {
color: purple !important;
}
<!-- 优先级 !important-->
<div>
<p>优先级</p>
</div>
-
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页(浏览器默认样式)。同时用户也可以在浏览器中设置自己习惯的样式，比如有字体大小，背景颜色等。这时注意样式优先级为：浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式，但记住
!important优先级样式是个例外，权值高于用户自己设置的样式。 -
选择器相同则执行层叠性
-
选择器不同则根据选择器权重执行
选择器权值的计算
- CSS特异性：我们会遇见一个选择器或者各级选择器搭配嵌套使用的情况，如
div.bar或者#nav .bar。如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。 - 通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！
- 关于权值的说法不一，在这里，定义以下权值的规则：
- 注意：
（1）这里的0,1采用的进制并不是简单的十进制，也不是二进制；上面的表格可理解为：内联样式权重为1000，id选择器权重为100，以此类推。
（2）权值由4位数字组成（这里的0,1采用的进制并不是简单的十进制，也不是二进制），权值叠加可理解为相加
（3）权值不会有进位，比如10个（0,0,0,1）相加得到（0,0,0,10）
（4）比较规则：从左往右逐个等级比较，前一等级相等才往后比。如1,0,0,0 > 0,99,99,99
（5）继承的权重是0，若未直接选中该元素，则不管父元素权重多高，子元素得到的权重都是0
举例：
/* 样式一 */
body header div nav ul li div p a span div {
width: 100px;
height: 100px;
background-color: red;
}
/* 样式二 */
.count {
width: 100px;
height: 100px;
background-color: yellow;
}
<!-- 权值的计算 -->
<header>
<div>
<nav>
<ul>
<li>
<div>
<p>
<a href="#">
<span>
<div class="count">权值的计算</div>
</span>
</a>
</p>
</div>
</li>
</ul>
</nav>
</div>
</header>
最后的效果是：类名为count的盒子是黄色的
原因：
样式一：权值相加——（0,0，0,11）
样式二：权值相加——（0,0，1,0）
五、CSS基本属性
CSS有很多样式，如背景样式，链接样式、列表样式、表格样式、轮廓样式等，具体参考CSS属性
（1）文本属性
- 文本颜色
color
p {
color:pink;
}
- 文本对齐
text-align
p {
text-align:left||middle||right
}
- 文本首行缩进
text-indent
p{
text-indent:2em;//首行缩进两格
}
- 控制大小写
text-transform
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
- 文本修饰
text-decoration：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
- 文本阴影效果
text-shadow：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
- 行高控制
line-height，垂直居中，则让行高和高度height相等即可
…
（2）字体属性
- 字体
font-family：规定文本的字体族（字体系列），可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
p{ font-family:"Times New Roman",Georgia,Serif; }
//有两种类型的字体系列名称：
（1）指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
（2）通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
//使用逗号分割每个值
-
字体大小
font-size：一定要跟上单位。常见单位：
常用的单位是px -
字体粗细
font-weight：数字不能跟单位
p{
font-weight:700;//加粗 =bold
400;//正常 =normal
}
- 字体样式
font-style：
p{
font-style:normal（正常）| italic（斜体）| oblique（倾斜） | inherit（从父元素继承）
}
- 设置小型大写字母
font-variant：小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
p {
font-variant: small-caps;//小体大写字母
//其他属性：nomarl：正常； inherit（从父元素继承）
}
<!-- font-variant -->
<p>AAAAAbbaa</p>
font简写属性:在一个声明中设置所有字体属性。
（1）使用font属性时，必须按照以下顺序书写，不能更换顺序：
p{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
/*简写*/
p{
font:italic small-caps bold 12px/1.5em arial,verdana;
}
（2）简写注意事项：简写时必须保留font-size和font-family属性，否则不起作用。同时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
六、盒子模型
1、HTML的元素分类
（1）块级元素
- 属性：
display:block - 特点：
- 每个块级元素都独占一行，并且其后的元素也另起一行
- 可设置元素的高度、宽度、行高以及顶和底边距
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
- 常用块状元素：
<div>、<p>、<h1> - <h6>、<ol>、<ul>、<dl>、<table>、<form>
（2）行内（内联）元素
- 属性：
display:inline - 特点：
- 不单独换行，和其它元素在一行上
- 不可设置元素的高度宽度和顶部、底部的边距
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
- 常见行内元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>var用于 定义变量，code用于定义代码，cite定义作品的标题
（3）行内块级元素
- 属性：
display:inline-block - 特点：
- 同时具备内联元素、块状元素的特点
- 和其他元素均在一行上
- 元素的宽度、高度、行高等边距都可设置
- 常见inline-block元素：
<img>、<input>
2、盒子模型
盒子模型：
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
（1）盒子模型的组成
- Content
- 实际的内容，可以是显示文本与图像等。
- css中设置的width与height即是content的宽高。
- Padding
- 内边距，边框与内容之间的距离，清除内容周围的区域，padding不能为负值
- padding只能设置大小，不能设置颜色（背景色为透明色），内边距受盒子的Background影响，可看到盒子背景色。
- 取值问题
padding:上 右 下 左（顺时针方向）
/* 1个取值 */
padding: 1px;
padding: 1px 1px 1px 1px;
/* 2个取值 */
padding: 10px 30px;
padding: 10px 30px 10px 30px;
/* 3个取值 */
padding: 10px 30px 20px;
padding: 10px 30px 20px 30px;
如果不想自动补值，可以直接只设定一个外边框的值，则可使用单独设立：padding-top | padding-right | padding-bottom | padding-left
- Border
- 边框，是围绕元素内容的内边框的一条或多条线。
- 边框由粗细、样式与颜色三部分组成。
border:width style color,
/*style属性有none、hidden（ 不显示边框，解决边框冲突问题）、dotted、double、solid等。*/
p{
border:1px solid pink;
}
- 设置边框角的弧度：
border-radius: 10px;也可以是百分比- 圆角边框：
border-radius: 50%
- 圆角边框：
- 透明边框的应用：防止盒子的抖动
input {
border:1px solid transparent;
}
- Margin
- 外边距，盒子和盒子之间的距离
- margin可以取负值，可以设置大小，不能设置背景，即margin设置的空白区域可看到父元素的背景
- 与padding的区别：padding可看到的背景是自身元素的背景而非父元素
- 取值问题同padding
margin：0 auto- 盒子水平居中
- 可拆分： margin:0 auto 0 auto（上下）；还可拆分为：
margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0; - 浮动、绝对定位、固定定位的盒子失效
（2）margin的合并
块级元素的上外边距与下外边距有时会合并为单个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 发生条件：
- 两个块级元素（block），内联元素不包括
- 是上下不包含左右
- 只发生在普通文档流中竖直方向上
标准流：也称普通流、文档流。
其标签是按照规定好的默认方式排列的，如块级元素会独占一行，从上到下排列；行内元素按照从左到右排列，碰到父元素边缘则自动换行。
- 合并的几种情况
（1）兄弟元素之间
（2）父子元素之间
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。
margin的塌陷：垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的。
BFC
（3）一个空元素，没有边框和填充
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
（3）margin失效
margin-top和margin-bottom对行内元素会失效，margin-left和margin-right是起作用的。- 行内元素设置垂直方向padding的时候，文字本身的位置是不会发生变化的，但是占据空间会变大，所以一般不对行内元素设置
padding-top，padding-bottom
（4）两种盒子模型
-
W3C标准盒模型
- 元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
- 元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
-
IE盒模型
- 在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE6以下版本浏览器使用的是IE盒模型。
- content的width与height包括了border与padding
- 避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可
- 注意区分：盒子所占空间和盒子实际的大小
-
盒子模型相互转换
box-sizing属性content-box：（默认值）使元素遵循标准的W3C模型border-box：遵循IE盒子模型- 一个box宽度为100%，又想要两边有内边距
- 让有边框的盒子正常使用百分比宽度
inherit：规定从父元素继承box-sizing属性的值。
CSS3 是现在最新的 CSS 标准，可自行学习CSS3
扫一扫
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
