题图：CSS的魔力
CSS概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS语法
css语法规则由两个主要部分组成：选择器和属性值
CSS语法
css的使用注意点：
-
<style>标签必须写在<head>标签的开始标签和结束标签之间 -
<style>标签中的type属性可以省略，默认值即为type="text/css" - 设置样式时必须按照固定的格式来设置，例如：
key ：value
CSS属性
CSS属性
文字属性
<style>
p {
color: red;
text-align: center;
font-style: italic; /*设置倾斜*/
font-weight: bold; /*文字加粗*/
font-size: 20px; /* 文字颜色 注意: 设置值需要写px */
font-family: "微软雅黑" ,"备选方案字体"; /* 设置字体*/
}
</style>
-
font-style：规定文字样式的属性，italic 倾斜，normal 正常默认值 -
font-weight：规定文字粗细的属性，bold 加粗，bolder 更粗 ，lighter 较细 -
font-size：规定文字大小的属性，大小值的单位使用px（像素）表示 -
font-family：规定文字字体的属性，需要注意，如果是中文属性值需要添加双引号，而且设置的字体必须是电脑里已经安装的字体
文本属性
<style>
p{
text-decoration: none;
text-align: left;
text-indent: 2em;
}
a{
text-decoration: none;
}
</style>
-
text-decoration：文本装饰属性，取值：-
underline：下划线 -
line-through：删除线 -
overline：上划线 -
none：无任何修饰
-
-
text-align：文本水平对齐属性，取值：-
left：左对齐 -
right：右对齐 -
center：居中对齐
-
-
text-indent：文本缩进对齐，取值：2em，其中em是单位，代表一个文字的宽度
颜色属性
<style>
p{
color: red;
color: rgb(255,0,0);
color: rgba(255,0,0,1);
color: #FF0000;
}
</style>
-
color：red：直接采用系统提供的颜色值 -
color：rgb()：采用RGB三原色数值来表示颜色 -
color: rgba()：采用RGB颜色值，并且指定颜色值的alpha通道值（即透明度） -
color: #ff00bb：采用16进制的RGB值，来指定颜色其中 "ff"代表红色，"00"代表绿色，"bb"代表蓝色
CSS选择器
CSS选择器
css常用选择器
- 标签选择器
- id选择器
- 类选择器
- 后代选择器
- 子选择器
- 属性选择器
标签选择器
h1 {
color: blue;
}
作用：根据指定的标签名，在当前界面中找到所有该名称的标签设置属性
注意点：
- 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
- 只要是HTML中的标签就可以作为标签选择器
id选择器
<style>
#identity1 {
color: red;
}
#identity2 {
color: green;
}
</style>
作用：根据指定的id名称找到对应的标签, 然后设置属性
注意点：
- 每个HTML标签都有一个属性叫做id, 所以每个标签都可以设置id
- 在同一个界面中id的名称是不可以重复的
- 在编写id选择器时一定要在id名称前面加上#
- id的名称只能由字母/数字/下划线组成，不能以数字开头,不能使用HTML标签
- 在企业开发中一般情况下如果仅仅是为了设置样式, 不建议使用id ，id主要是留给js使用
类选择器
<style>
.header{
color: red;
}
</style>
作用：根据指定的类名称找到对应的标签, 然后设置属性
注意点：
- 每个HTML标签都有class属性
- 在同一个界面中class的名称是可以重复的
- 在编写class选择器时一定要在class名称前面加上“ . ”
- 类名的命名规范和id名称的命名规范一样
- 类名就是专门用来给CSS设置样式的
- 在HTML中每个标签可以同时绑定多个类名，例如：`<标签名称 class="类名1 类名2 ...">
后代选择器
<style>
div p{
color: red;
}
#identity p{
color: red;
}
.para p{
color: blue;
}
#identity #iii{
color: green;
}
#identity .ccc{
color: purple;
}
div ul li p{
color: red;
}
</style>
作用：找到指定标签的所有特定的后代标签, 设置属性
格式：
标签名称1 标签名称2{
属性:值;
}
解释：先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后设置属性
注意点：
- 后代选择器必须用空格隔开
- 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
- 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 后代选择器可以通过空格一直查找下去
子元素选择器
<style>
div>p{
color: red;
}
#identity>p{
color: blue;
}
div>ul>li>p{
color: purple;
}
</style>
作用：找到指定标签中所有特定的直接子元素, 然后设置属性
格式：
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做标签名称1的标签, 然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素
注意点：
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 子元素选择器可以通过>符号一直查找下去
属性选择器
<style>
p[id]{
color: red;
}
p[class=cc]{
color: blue;
}
</style>
作用：根据指定的属性名称找到对应的标签, 然后设置属性
格式：
-
[attribute]：根据指定的属性名称找到对应的标签, 然后设置属性 -
[attribute=value]：找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性最常见的应用场景就是用于区分input属性
CSS三大特性
- 继承性
- 层叠性
- 优先级
继承性
定义：给父元素设置的属性, 子元素也同样会被设置, 这个我们就称之为继承性
注意点：
- 并不是所有的属性都可以继承, 只有以
color/font-/text-/line-开头的属性才可以继承 - 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
-
a标签的文字颜色和下划线是不能继承的，h标签的文字大小是不能继承的
层叠性
定义：层叠性就是CSS处理冲突的一种能力
注意点：层叠性只有在多个选择器选中同一个标签, 然后又设置了相同的属性, 才会发生层叠性
优先级
定义：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级的三种方式
- 间接选中就是指继承如果是间接选中, 那么就是谁离目标标签比较近就听谁的
- 相同选择器(直接选中)如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
- 不同选择器(直接选中)如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠id>类>标签>通配符>继承>浏览器默认
优先级的权重：当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重计算规则：
- 首先先计算选择器中有多少个id, id多的选择器优先级最高
- 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
- 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
- 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的也就是说优先级如果一样, 那么谁写在后面听谁的
注意点：
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
CSS元素的显示模式
- 块级元素
- 行内元素
块级元素
定义：块级元素会独占一行，大多属于容器类元素
属于块级元素的标签有：
<div>,<h>,<p>,<ul>,<ol>,<dl>,<li>,<dt>,<dd>
行内元素
定义：行内元素不会独占一行
属于行内元素的标签有：
<span> ,<a>,<b>,<strong>,<em>,<ins>,<del>,<td>,<img>
块级元素和行内元素的区别
- 块级元素会独占一行如果没有设置宽度, 那么默认和父元素一样宽如果设置了宽高, 那么就按照设置的来显示
- 行内元素不会独占一行如果没有设置宽度, 那么默认和内容一样宽行内元素是不可以设置宽度和高度的
- 行内块级元素为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
CSS元素的显示模式转换
可以通过display属性来设置显示模式，取值有：
-
block：设为块级 -
inline：设为行内 -
inline-block：设为行内块级
CSS盒子模型
盒子模型图示
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
盒子的box-sizing属性
CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变，取值：
-
content-box：元素的宽高 = 边框 + 内边距 + 内容宽高 -
border-box：元素的宽高 = width/height的宽高
网页的布局方式
- 标准流
- 浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
- 垂直排版： 如果元素是块级元素, 那么就会垂直排版
- 水平排版：如果元素是行内元素/行内块级元素, 就会水平排版
- 浮动流
- 浮动流是一种"半脱离标准流"的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点：
- 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中不可以使用margin: 0 auto;
- 在浮动流中不区分块级元素/行内元素/行内块级元素
- 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
- 在标准流中内容的高度可以撑起父元素的高度
- 在浮动流中浮动的元素是不可以撑起父元素的高度的
浮动元素排序规则
- 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
- 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
- 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
浮动元素贴靠现象
- 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
文章引用
- 思维导图摘自李南江老师视频教程中
- 部分概念摘自
w3school
声明
本文只做学习记录使用，分享出来供大家学习参考。文章中如有错误欢迎批评指正，谢谢。
网友评论