这是我参与「第五届青训营」伴学笔记创作活动的第2天

css常见布局.jpg 注：图片转载于@sunshine小v小倩[CSS 常见布局方式 - 掘金 (juejin.cn)] ，感兴趣的请点击下方链接阅读原文：juejin.cn/post/684490…

课堂重点🗒️🖋️

CSS 代码构成

CSS使用方法

CSS流程之选择器组、文本渲染

调试CSS

CSS选择器的特异度

CSS维承

CSS求值过程解析

CSS布局方式及相关技术

CSS盒模型，分别为行级和块级

1.什么是CSS

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2.CSS语法

CSS语法基础规则由两个主要部分构成：

选择器
1或n条说明 每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

语法：

selector{property: value}

h1{color:red; font-size: 14px;}h1是选择器，color和font-size是属性，red和14px是值。

p{text-align:center;color:red} 若定义不止一个声明要用分号将每个声明分开。

p {font-family: "sans serif";}若为若干单词，则要给值加引号

CSS继承遵循子元素从父元素继承属性

3.创建CSS

内部样式表

<head>
    <style type="text/css">
    选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
    div{width: 20opx; height:20opx; border : 1px solid red;}
    </style>
</head>

行内式（内联样式）

<div style="width:200px;height:100px;border:1px solid black;"></div>

外部样式表（外链式）

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</ head>

样式优先级:内联样式>内部样式>外部样式

三者区别

内部样式表优缺点	行内式优缺点	外部样式表
优：书写方便；	优：部分结构和样式相分离；	完全实现结构和样式分离；
缺：没有实现样式和结构相分离;	缺：没有彻底分离；	缺：需要引入；
控制范围是控制一个标签(少)。	控制范围是控制一个页面(中)。	控制范围是控制整个站点(多)。

4.id和class选择器

id选择器： id选择器可以为标有特定 id 的HTML元素指定特定的样式, id属性和身份证一样具有唯一性。 HTML元素以id属性来设置id选择器，CSS中id选择器以"#”来定义。 注意: id属性不能以数开头！🧐

语法：

#id名{属性1;属性值1;属性2:属性值2;属性3:属性值3;}

class选择器： class选择器用于描述一组元素的样式，也叫做类选择器。 class可以在多个元素中使用，并且一个元素也可以指定多个类名。在CSS 中，类选择器以一个点".”号来定义。同样的类名的第一个字符也不能使用数字。

语法：

.类名{属性1：属性值1;属性2:属性值2;属性3:属性值3;}

id选择器	class选择器
相同点：都可以应用于任何元素
不同点：1. id 选择器只能在文档中使用一次，而 class 选择器可以使用多次。	2.可以使用 class 选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而 id 只能指定一个。

5.CSS元素选择器

也称为标签选择器，是HTML中元素的最基本选择器。

语法：

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

或者

元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

6.CSS背景(blackground)

background 属性用于定义 HTML 元素的背景。定义元素背景效果的CSS属性有以下五种：

background-color (背景颜色)
background-image (背景图像)
background-repeat (背景图像设置水平或垂直平铺或不平铺)
background-position (背景图像设置定位)
background-attachment (背景图像设置固定或滚动)

也可以直接简写成： body{background:green url( 'images/fix.gif' ) no-repeat fixed 12px 24px;}

当使用简写属性时，属性值的顺序依次为：

background-color --> background-image --> background-repeat -->background-attachment --> background-position

7.CSS外观属性

text-color (文本颜色)
text-align (文本对齐方式)
text-dexoration:overline (设置文本上划线)
text-decoration:underline (设置文本下划线)
text-shadow:x y shadow color (文本阴影)其中×是水平阴影的偏移值， y是垂直阴影的偏移值，shadow用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。

8.CSS字体 ( font )

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

简写顺序

font-style (字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体) 注：font-size和font-family的值是必须的，否则无效！！！

设置字体绝对或相对大小

用 px 设置:通过像素设置文本大小是设置的整个页面。
使用 em 设置: 1 em 等于当前的字体尺寸，比如设置的默认字体是12px，因此1 em 的默认大小就是12px。像素转换 em : px/12 = em
使用 % 和 em 组合设置:在所有浏览器的解决方案中，设置body元素的默认字体大小是100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

<head>
    <style>
        body{font-size: 100%}
        p{font-size:2.5em; }   /*2.5*16=40px */
    </style>
</head>
<body>
    <p>使用%和em组合设置</p>
</body>

font-style 属性

主要用于指定斜体文字，该属性有三个值：

normal (正常显示文本)
italic (定义斜体)
oblique(定义倾斜的文字)

9.CSS链接

CSS的链接有以下四种状态：

a:link	a:visited	a:hover	a:active
-正常，未访问过的链接。	-已访问过的链接。	-当鼠标滑动到链接上时。	链接被点击的那一刻。

10.CSS列表

1.设置不同的列表项标记 2.设置列表项标记为图像

修改列表项标记使用list-style-type，使用图像作为标记可以利用list-style-image 属性完成。

无序列表- 无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用list-style-type:none，表示无标记。
list-style-type属性的默认值为disc实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表- 有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记- 要指定列表项标记的图像，可以使用list-style-image 属性，只需要简单地设置一个url)值，就可以将图像作为标记类型。

列表属性简写: list-style: list-style-type，list-style-position,list-style-image;

11.CSS表格

表格边框	表格宽度和高度	表格对齐	表格内边距
border	width 和 height	text-align 和 vertical-align	tr,td 的 padding 设置

12.CSS选择器

1.分组和嵌套选择器

分组选择器

h1{ color : gray ; }

p{color:gray ; }

可以写成:

h1，p{color:gray; }

嵌套选择器

.div1 p{
    color:white;
}
.div1 p a{
    color:yellow;
    font-weight:bold;
}
<div class="div1">
    <p>嵌套选择器
        <a href="#">深层嵌套选择器</a>
    </p>
</div>

通配符选择器

*{
        padding:0;
        margin:0;
}

2.属性选择器

属性选择器：属性选择器使用[attr]; 例如:把所有带有 title 属性的元素的字体设置为红色。

<head>
    <style>
        [title]{
            color : red;
        }
    </ style>
</head>
<body>
    <h1> h1 标题不带有 title 属性</h1>
    <h2 title="标题"> h2 可以设置样式</h2>
    <a href="#" title="链接">超链接可以设置样式</a>
</body>

属性和值选择器：属性选择器使用[attr=value]

<head>
    <style>
        [title=Hello]{
            color : blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world"> h1 标题 title="Hello world"</h1>
    <h2 title="Hello"> h2 可以设置样式</h2>
    <a href="#” title="Hello">超链接可以设置样式</a>
</body>

属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]。
例如：把包含 title='Hello' 的元素的字体设置为绿色，使用 ~ 分隔属性和值。
表单样式:属性选择器在为不带有class或id的表单设置样式时特别有用。

3.组合选择器

组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器的关系是直接的。

后代选择器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
相邻兄弟选择器:可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
普通相邻兄弟选择器:选取所有指定元素的相邻兄弟元素，以～分隔。
选择器组合:多种选择器可以结合起来使用。

13.CSS伪类(不区分大小写)

CSS 伪类是用来向一些选择器添加特殊的效果。

语法：选择器：伪类{attr:value;}

CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}

超链接伪类

在浏览器中，链接的不同状态都可以以不同的方式显示：

/*未访问的链接显示为红色*/
a : link{color : #FFo000 ; }
/*已访问的链接显示为绿色*/
a : visited{color : #OOFFOO; }
/*鼠标划过链接显示为紫红色*/
a : hover{ color : #FFOOFF; }
/*已选中的链接显示为蓝色*/
a :active{color : #000OFF;}

注:在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于a:hover之后，才是有效的。

伪类和CSS 类(伪类可以与CSS 类配合使用)
css2 - :first - child伪类
CSS2 - :lang 伪类- 使用:lang 伪类可以为不同的语言定义特殊的规则。

14.CSS伪元素

CSS伪元素是用来为一些选择器添加特殊的效果。

语法：选择器：伪元素{attr:value;}

CSS类也可以使用伪元素:选择器.class:伪元素{attr:value;}

15.块级元素和行内元素

1.块级元素(block-level):每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1~h6>、p>、<div、<ul、<ol、<li等，其中<div 标签是最典型的块元素。

块级元素特点:

总是从新行开始
高度，行高，外边距以及内边距都是可以控制的
宽度默认是容器的100%
可以容纳内联元素和其他块元素

2.行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<a、<strong、<b、<em、<i、<del、<s、<ins、<u、<span等，其中<span 标签最典型的行内元素。

行内元素特点:

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。(a特殊)

16.行内块元素(inline-block)

在行内元素中有几个特殊的标签——<img/、<input/、<td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点:

和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

17.CSS三大特性

层叠、继承、优先级

CSS层叠性: 是指多种CSS样式的叠加。
CSS继承性: 是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是:子承父业。
CSS优先级： 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

使用了!important声明的规则。考虑权重时，需要注意的以下几点：

继承样式的权重为0。
行内样式优先。
权重相同时，CSS遵循就近原则。

18.盒子模型⭐⭐⭐⭐⭐

CSS三大模块：盒子模型、浮动、定位

语法: border : border-width |l border-style ll border-color

常用属性值: none: 没有边框即忽略所有边框的宽度（默认值)、solid线(单实线)、dashed(虚线)、dotted(点线)、double(双实线)

19.居中

1.外边距实现盒子居中

需要满足以下两个条件：

必须是块级元素。
盒子必须指定了宽度 (width) , 然后给元素左右的外边距都设置为auto。

例子：.header{width:960px;margin:0 auto;}

2.文字盒子居中

文字水平居中是 text-align:center
盒子水平居中 - 左右 margin 改为 auto

20.盒子模型布局稳定性

按照优先使用宽度 (width) 、其次使用内边距 (padding) 、再次外边距 (margin) 。width > padding > margin

原因:

margin会有外边距合并还有 ie6 下面 margin 加倍的 bug ，所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦)其次使用。
width 没有问题，我们经常使用宽度剩余法高度剩余法来做。

21.盒子阴影

语法: box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影颜色﹑内/外阴影;

22.浮动(float)

CSS的定位机制有3种:普通流（标准流)、浮动和定位。

浮动: 是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法:选择器{float:属性值;}属性值可以是left，right, both, none。 目的:为了让多个块级元素同一行上显示。

23.定位(position)

position 属性值分为四种:

static:自动定位（默认定位方式)，所谓静态位置就是各个元素在 HTML 文档流中默认的位置。
relative:相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
absolute:绝对定位，相对于其上一个已经定位的父元素进行定位
fixed:固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器;完全脱标，不占有位置，不随着滚动条滚动。

叠放次序(z-index的特点:

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字—定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

结尾

今天主要学习理解CSS，都是一些很基础的内容，但是能写到这里我感到非常的满足。🤷‍♀️ ~~（太不容易了）~~

综上，今天又是好好学习的一天！😊

理解CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第2天

课堂重点🗒️🖋️