前端CSS技术全解（一）

最新推荐文章于 2023-05-07 21:49:00 发布

Chiclaim

最新推荐文章于 2023-05-07 21:49:00 发布

阅读量2k

点赞数 4

分类专栏：前端技术

本文链接：https://blog.csdn.net/yuzhiqiang666/article/details/52805228

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、概述

1）用HTML完成样式工作

哪个标签有哪个属性难以记忆
需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改4个地方)

<h1 align="center">
    <font face="微软雅黑" color="red">成功法则</font>
</h1>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">迟到毁一生</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">早退穷三代</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">按时上下班</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">必成高富帅</font>
</p>

2）用HTML+CSS完成

不用记忆哪些属性属于哪个标签
当需求变更时我们不需要修改大量的代码就可以满足需求
在前端开发中CSS只有一个作用, 就是用来修改样式

<style type="text/css">
        h1{
            text-align: center;
            color: red;
            font-family: "微软雅黑";
        }
        p{
            text-align: center;
            color: blue;
            font-size: 20px;
        }
</style>
<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>
<p>必成高富帅</p>

二、CSS格式

1）格式

<style type="text/css">
      标签名称{
          属性名称: 属性对应的值;
          ...
      }
</style>

##2）注意点
style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性其实可以不用写, 默认就是type=”text/css”
设置样式时必须按照固定的格式来设置. key: value; 其中 : 不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)

##3） CSS怎么学?
CSS的学习一共分为两大部分, 一个是CSS的属性；
另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了

p{
    text-align: center;
    color: blue;
    font-size: 20px;
}

三、CSS属性

1）文字属性

font-style

作用: 规定文字样式
格式: font-style: italic;
取值:
normal ：正常的，默认就是正常的
italic : 倾斜的

font-weight

作用: 规定文字粗细
格式: font-weight: bold;
单词取值: bold 加粗；bolder 比加粗还要粗；lighter 细线，默认就是细线
数字取值：100-900之间整百的数字

font-size

作用: 规定文字大小
格式: font-size: 30px;
取值: px(像素 pixel)

font-family

作用: 规定文字字体
格式: font-family:”楷体”;
取值: 各种字体名称
注意点:
如果取值是中文，需要用双引号或者单引号括起来
设置的字体必须是用户电脑里面已经安装的字体

字体属性补充

如果设置的字体不存在, 那么系统会使用默认的字体来显示
默认一般使用宋体
如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式: font-family:”字体1”, “备选方案1”, …;
如果想给中文和英文分别单独设置字体, 怎么办?

但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: “Times New Roman”/Arial
还需要知道一点, 就是并不是名称是英文就一定是英文字体,因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei

文字属性缩写

缩写格式:
font: style weight size family;
例如:
font:italic bold 10px "楷体";
注意点:
在这种缩写格式中有的属性值可以省略
style可以省略
weight可以省略
在这种缩写格式中style和weight的位置可以交换
在这种缩写格式中有的属性值是不可以省略的

size不能省略
family不能省略
size和family的位置是不能顺便乱放的, size一定要写在family的前面, 而且size和family必须写在所有属性的最后

2）文本属性

text-decoration

作用: 给文本添加装饰
格式: text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

text-align

作用: 设置文本水平对齐方式
格式: text-align: center;
取值:
left 左
right 右
center 中

text-indent

作用: 设置文本缩进
格式: text-indent: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度

3）颜色属性

在CSS中如何通过color属性来修改文字颜色
格式: color: 值;

取值（英文单词）:

一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达

取值（rgb）

rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色

取值（rgba）

rgba 中的 rgb 和前面讲解的一样, 只不过多了一个a.
a代表透明度, 取值是0-1, 取值越小就越透明
例如:
color: rgba(255,0,0,0.2);

取值（十六进制）

通过十六进制来表示颜色其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如: #FFEE00 FF表示R EE表示G 00表示B
什么是十六进制?
十六进制和十进制一样都是一种计数的方式
在十进制中取值范围0-9, 逢十进一
在十六进制中取值范围0-F, 逢十六进一
十进制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f
十六进制和十进制转换的公式
用十六进制的第一位*16 + 十六进制的第二位 = 十进制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0
十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如: #FFEE00 == #FE0

注意点:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写 #123456
2.如果两位相同的数字不是属于同一个颜色的, 也不能简写 #122334

四、CSS选择器

1）标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:

标签名称{
  属性:值;
}

如：

p{
    text-align: center;
    color: blue;
    font-size: 20px;
}

其中p就就是标签。这段样式就会作用到html中所有的p标签。

注意点:
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中

2）id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:

#id名称{
  属性:值;
}

如下面的样式就会作用到id为purchases的ul上：

#purchases{
	border: 1px solid red;
	background-color:  #333;
	color: white;
	padding: 2em;
}

<ul id="purchases">
	<div>
		<div>
		<li>支付宝</li>
		</div>
	</div>
	<li>微信</li>
	<li>信用卡</li>
</ul>

注意点:
每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
在同一个界面中id的名称是不可以重复的
在编写id选择器时一定要在id名称前面加上#
id的名称是有一定的规范的
id的名称只能由字母/数字/下划线(a-z 0-9 _)
id名称不能以数字开头
id名称不能是HTML标签的名称()不能是a h1 img input …)
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的

##3）类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:

.类名{
  属性:值;
}

如下面的样式special会作用到类为special的h2标签：

.special{
	font-style: italic;
}

<h2 class="special">element h2 has special class</h2>

注意点:
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
在同一个界面中class的名称是可以重复的
在编写class选择器时一定要在class名称前面加上点
类名的命名规范和id名称的命名规范一样
类名就是专门用来给CSS设置样式的
在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

##4） id选择器和类选择器

id和class的区别?

1.1
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称

id选择器和class选择器区别?

id选择器是以#开头
class选择器是以.开头

在企业开发中到底用id选择器还是用class选择器?

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

5）后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:

标签名称1 标签名称2{
  属性:值;
}

先找到所有名称叫做”标签名称1”的标签, 然后再在这个标签下面去查找所有名称叫做”标签名称2”的标签, 然后在设置属性

注意点:
后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
后代选择器可以通过空格一直延续下去

如下面的样式会作用给li标签里的两个p标签：

 div ul li p{
     text-align: left;
     color: red;
 }
<div>
    我也是段落start
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <!--<p id="iii" class="ccc">我是段落</p>-->
            <p>我是段落</p>
        </li>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
    我也是段落start
</div>

6）子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:

标签名称1>标签名称2{
  属性:值;
}

先找到所有名称叫做”标签名称1”的标签, 然后在这个标签中查找所有直接子元素名称叫做”标签名称2”的元素

注意点:

子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器可以通过>符号一直延续下去

如
下面的样式作用给li标签：

div > ul > li > p {
    color: purple;
}

<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>

7）后代选择器和子元素选择器

后代选择器和子元素选择器之间的区别?

1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

后代选择器和子元素选择器之间的共同点

2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

选择器1>选择器2>选择器3>选择器4{
    ...
}

在企业开发中如何选择

如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

8）交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:

选择器1选择器2{
  属性: 值;
}

注意点:

选择器和选择器之间没有任何的连接符号
选择器可以使用标签名称/id名称/class名称
交集选择器仅仅作为了解, 企业开发中用的并不多

如下面的样式只会给第一个段落设置样式，因为只有第一个p标签同时包含class="para1" id="identity2"：

.para1#identity2{
    color: green;
}
<p class="para1" id="identity2">我是段落1</p>
<p class="para1">我是段落2</p>

9）并集选择器

作用: 给所有选择器选中的标签设置属性
格式:

选择器1,选择器2{
  属性:值;
}

注意点:
并集选择器必须使用,来连接
选择器可以使用标签名称、id名称、class名称

如下面的样式会为h4和p两个标签同时设置样式：

.ht,.para{
    color: pink;
}
<h4 class="ht">我是标题1</h4>
<p class="para">我是段落2</p>

10）兄弟选择器

相邻兄弟选择器

什么是相邻兄弟选择器 CSS2
作用: 给指定标签后面紧跟的那个标签设置属性
格式:

选择器1+选择器2{
  属性:值;
}

注意点:
相邻兄弟选择器必须通过+连接
相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

如下面的样式h2后面的的p标签设置颜色，最后一个p标签不会，因为被a标签隔开了：

h2+p {
    color: brown;
}
<h2>我是标题</h2>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>

通用兄弟选择器

什么是通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:

选择器1~选择器2{
  属性:值;
}

注意点:
通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

如下面的样式会给h6后面的所有p标签设置样式，不管这个p标签有没有被他标签隔开：

h6~p {
    color: fuchsia;
}
<h6>我是标题</h6>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>

<h6>我是标题</h6>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>

11）序选择器

序选择器是CSS3中新增的选择器最具代表性的就是序选择器
作用: 选中指定的任意标签然后设置属性
格式:

1.同级别的第几个

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

如下面的样式会给第二个p标签设置样式

p:nth-child(2){
    color: red;
}
<div>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
</div>

2.同级同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

3.其它用法

:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
:nth-of-type(odd) 选中同级别中同类型的所有奇数
:nth-of-type(even) 选中同级别中同类型的所有偶数
:nth-of-type(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

12）属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
-作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
-作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
-最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

如下面样式会为两个p标签设置样式，因为它们都包含id属性：

p[id]{
    color: red;
 }
 <p id="identity4">我是段落1</p>
 <p id="identity5" class="cc">我是段落2</p>

属性的取值是以什么开头的

[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
比如有下面两个img标签：

<img src="" alt="abcdef">
<img src="" alt="abc-www">

下面样式会把这两个img标签设置样式：

img[alt^=abc]{
    color: lawngreen;
}

下面的样式则只会设置第二个img标签：

img[alt|=abc] {
    color: lawngreen;
}

属性的取值是以什么结尾的

[attribute$=value] CSS3
如下面的样式就是会为两个img设置样式：

img[alt$=abc]{
    color: blue;
}
<img src="" alt="defabc">
<br/>
<img src="" alt="ppp abc">

属性的取值是否包含某个特定的值

[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到, 无论有没有被隔开
比如下面的样式只会给ppp abc 和 www abc mmm 设置样式：

img[alt~=abc]{
    color: red;
}
<img src="" alt="ppp abc"><br/>
<img src="" alt="wwwabcmmm"><br/>
<img src="" alt="www-abc-mmm"><br/>
<img src="" alt="www abc mmm"><br/>

下面的样式会给所有alt中包含abc的标签设置样式：