WEB前端之CSS

JianSinShen

已于 2022-09-09 22:52:42 修改

阅读量151

点赞数

分类专栏：前端学习文章标签： css html5

于 2021-02-10 14:59:25 首次发布

本文链接：https://blog.csdn.net/weixin_43684831/article/details/113772310

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS

使用场景：美化网页，布局页面

HTML局限性：只关注内容的语义

CSS层叠样式表：Cascading Style Sheets标记语言

用于设置HTML页面中文本内容(字体、大小、对齐方式等),图片外形(宽、高、边框、边距等),版面布局和外观

CSS语法规范：主要由两个主要部分构成：选择器和一条或者多条声明。如:
h1{
    color:red;
    font-size:25px;
}
经常在<head></head>之间的<style></style>中写。

属性和属性值之间以键值对的形式来成对出现，选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外

CSS基础选择器

选择器是用来选择标签来使用的。

选择器分为基础选择器和复合选择器两大类

基础选择器由单个选择器组成。

基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器。

标签选择器：标签名作为选择器
标签名 {
    属性1：属性值1;
    属性2: 属性值2;
}
类选择器:单独选择一个或多个标签，使用类选择器。

结构需要class属性来调用class类的意思。
<div class = "yanse">红色</div>

.yanse{
    color:red;
}
一个标签内可以有多个类名，多个类名间必须使用空格分开。

id选择器：为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义。
#id名 {
    属性1:属性值1；
}
每个id都是不同的，因此每个id是唯一的，不会有重复现象。

可以将类选择器，理解为一类人，比如男人，女人等。

可以将id选择器，理解为身份证号，每个人的身份证号都是唯一的，不会重复。

通配符选择器：使用*来表示选取页面中所有元素(标签);
* {
    color:red;
}

CSS字体属性

定义字体系列、大小、粗细、文字样式。

字体系列：font-family:"微软雅黑";

各种字体间须使用英文逗号进行隔开。

字体大小:font-size定义字体大小，一般以px为单位，给body一个指定大小，不要使用默认大小。标题标签比较特殊，需要单独指定大小。

字体粗细：font-weight:bold;dont-weight:300;

CSS文本属性：定义文本的外观，，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

color:red; 或者color:#ff0000; 或者color:rgb(255,0,0)开发中尝试用第二种十六进制。

对齐文本：text-align属性用于设置元素内文本内容水平对齐方式。

属性值：left/center/right

装饰文本:text-decoration属性规定添加到文本的修饰，给文本添加下划线、删除线、上划线等。

属性值：

none 默认，没有装饰线；

underline 下划线，链接a自带下划线；

overline 上划线，几乎不用；

line-through 删除线，不常用

取掉a默认的下划线：text-decoration:none;

文本缩进：指定文本第一行的缩进，段落首行缩进。

text-indent:30px; 或者text-indent:2em;

1em相当于一个当前元素大小。

行间距：设置行间的距离（行高）

line-height:26px;

CSS引入方式

1)行内样式表(行内式)

<div style = "color:red;font-size:12px;">青春不常在</div>

只能控制该行，没有实现结构和样式相分离，控制一个标签。

2）内部样式表（嵌入式),写到<head></head>标签中

控制一个页面

3)外部样式表(链接式)

适用于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中。

引入外部样式表，分为两步：

1.新建一个后缀名为.css的样式文件，把所有的CSS代码放入此文件中。

2.在HTML页面中，使用<link>标签引入该文件，<link rel = "stylesheet" href = "css文件路径">控制多个页面

Emmet语法：使用缩写可以提高html/css编写速度

1.快速生成HTML结构语法

标签名+tab键快速生成匹配标签

div*3+tab键快速生成3个div

有父子关系的使用> ul>li可以生成<ul><li></li></ul>

有兄弟关系新的使用+，例如div+p

生成带类名的标签使用.类名，比如p.one

生成带id名的标签使用#id名，比如p#banner

带有多个.demo*5生成5个类为demo的标签

如果生成的类名是有顺序的，可以使用自增符号$

如果想要生成的标签内部写内容可以使用{}

复合选择器

建立在基础选择器之上，由基础选择器组合而成，可以更准确，搞笑的选择目标元素。

复合选择器由两个或多个基础选择器通过不同方式组合而来，复合选择器包括后代选择器、子类选择器、并集选择器、伪类选择器。

后代选择器：又称包含选择器，可以选择父元素里面的子元素。

写法：将外层标签写在前面，内层标签写在后面，中间用空格分隔，发生嵌套时，内层标签为外层标签的后代。
元素1  元素2 {
    样式声明;
}
最终选择的是子类。

子选择器：只能选择作为某元素的最近一级的子元素，简单理解为选亲儿子
元素1 > 元素2 {
    样式声明;
}
只会选择亲儿子，不会选择孙子辈。

并集选择器：可以选择多组标签，同时为他们定义相同样式，通常用于集体声明。
元素1,元素2 {
    样式声明;
}
并集选择器通过英文逗号连接而成，任何形式选择器都可以作为并集选择器的一部分。

并集选择器喜欢竖着写，注意，最后一个选择器不需要加逗号。

伪类选择器：用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，，，n个元素。

伪类选择器最大书写特点是使用冒号表示，比如:hover、:first-child。

伪类选择器有链接伪类，结构伪类等。

链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择正在按下还没有弹起的鼠标链接

注意事项:为了确保生效，必须按照LVHA的顺序声明。

:focus伪类选择器：用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说。

input:focus {

background-color:yellow;

}

CSS元素显示模式：元素以什么方式来进行显示。

HTML元素一般分为块元素和行内元素。

块元素:<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>等。

块内元素特点:

比较霸道，自己独占一行。
高度、宽度、内外边距可以控制。
宽度默认为父容器的100%
是一个容器及盒子，可以向里面放行内或者块级元素。

注意:

文字类元素不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是<div>
<h1>...<h6>都是文字标签，不能放其他块级元素

行内元素:<a>、<strong>、<em>、<span>又称为内联元素。

行内元素特点:

相邻内元素在一行上，一行可以显示多个
高、宽直接设置是无效的。
默认宽度为它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素。

注意:

连接中不能再放链接
特殊情况下<a>中可以放块级元素，但是需要将<a>转化一下块级模式比较安全。

行内块元素：<img>、<input>、<td>

同时具有块级元素和行内元素的特点，又是被称为行内块元素。

行内块元素特点:

和相邻的行内元素在一行上，一行可以显示多个，它们之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度、行高、内外边距都可以控制。

元素显示模式转换:

特殊情况下，需要元素模式的转换，一个模式的元素需要另一个模式的特性，比如增加链接<a>的触发范围。

行内元素转换为块内元素:display:block;

块内元素转换为行内元素:display:inline;

转换为行内块元素:display:inline-block;

CSS元素显示模式：文字垂直居中，可以使用文字行高等于盒子的高度。

行高的上空隙和下空隙会将文字挤到中间，如果行高小于盒子高度，文字偏上，如果行高大于盒子高度，文字会偏下。

背景颜色:background-color:transparent|(color);一般默认颜色为transparent。

背景图片：常见于logo、装饰性或者超大的背景图片。

background-image:none|url(url);

背景平铺:background-repeat:repeat|no-repeat|repeat-x|repeat-y

背景图片位置：background-position:x y;

改变图片在背景中的位置。

参数的意思是:x坐标和y坐标，可以使用方位名词和精确单位。

单位:

参数值说明
length 百分数|优浮点数字和单位标识符组成的长度值
position top | center | bottom | left | right 方位名词

背景图像固定(背景附着)

background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动。

background-attachment:scroll | fixed；

scroll: 背景图片随着对象内容滚动。

fixed: 背景图片固定。

背景复合写法：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置。

背景色半透明：background:rgba(0,0,0,0.3);最后一个为透明度，值在0-1之间，指背景色半透明，盒子里面内容不会有影响。

background-color:背景颜色

background-image:背景图片

background-repeat:是否平铺

background-position:背景位置

background-attachment:背景附着

CSS三大特性：层叠性、继承性、优先性

层叠性：给相同的选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠行主要解决冲突的问题。

样式冲突：遵循的就近原则，哪个样式离结构近，就执行哪个样式。

样式不冲突，不会层叠

继承性：子标签会继承父标签的某些样式，比如文本颜色和字号。

行高可以跟单位，可以不跟单位，不跟单位指当前元素大小的多少多少倍，比如1.5倍。

优先级：当同一个元素指定多个选择器，就会有优先级产生，选择器相同，则执行层叠性。选择器不同，则根据选择器权重来执行。

选择器权重
继承或* 0
元素标签选择器 1
类选择器，伪类选择器 10
ID选择器 100
行内样式style = "" 1000
! important 无穷大

继承的权重为0.

若该元素没有被直接选中，不管父亲权重多高，子元素得到的权重都是0。

a链接一般不会继承父亲的样式，需要重新指定。

权重叠加：如果实复合选择器就会有权重叠加，需要计算权重，权重虽然会叠加，但永远不会进位。

a:hover权重为11.