前端（CSS）第一周_css年季月周选择列表-CSDN博客

本文链接：https://blog.csdn.net/2301_78148870/article/details/130712476

1.CSS语法规范

1.在<head></head>内的<style></style>中写。

选择器 {属性 : 值；}

例：

<style>
    
    p {color: blue;}

</style>

2.创建一个CSS文件在其中不用写<style>标签。

2.CSS选择器

类选择器（.class）可以多个使用，id选择器（#id）只能一个使用,通配符选择器（*）全部都使用。

3.CSS属性

3.1字体属性

Font-family设置字体，font-size设置字号，font-weight设置文字粗细，font-style设置文本风格。

3.2文本属性

color：；text-align（文本对齐）：；text-decoration（装饰文本）：；text-indent（文本首行缩进）：；line-height（行间距）：；

4.CSS引入方式

例：<link rel=“stylesheet” href=“css文件路径”>

5.CSS显示模式

5.1块元素

（1）独占一行

（2）高度、宽度、内外边距都可控制

（3）是一个容器及盒子，里面可以放行内或块级元素

注意：文字类元素（<p>、<h1>）内不能放块元素，<p>也是块级元素。

5.2行内元素

（1）一行可以放多个

（2）高、宽度直接设置无效

（3）里面只能容纳文本或其他行内元素

注意：<a>里面不能再放<a>，但可以放块级元素。

5.3行内块元素

（1）一行可以放多个，会有空白缝隙

（2）高度、宽度、内外边距都可控制

例：<img />、<input />、<td>

5.4元素显示模式转换

转换为块元素：display：block

转化为行内元素：display：inline

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

6.CSS背景

6.1背景颜色

background-color: 颜色值 ; 默认为transparent（透明）。

6.2背景图片

background-image: url（地址）;默认为none。

background-repeat: no-repeat ;默认为repeat，还有repeat-x、repeat-y。

6.3背景图片位置

background-position: x y ;

如果使用方位名词，没有前后顺序；如果只写一个，第二个默认居中对齐。

如果使用精确坐标，有前后顺序；如果只写一个，第二个默认居中对齐。

如果混合使用，有前后顺序。

6.4背景图片固定

background-attachment: fixed ;默认为scroll（跟随滚动）。

6.5背景复合写法

background: 属性值 ;无顺序。

6.6背景色半透明

background: rgba（0,0,0,0.3）;最后一个值为透明度。

7.CSS三大特性

7.1层叠性

给相同选择器设置相同样式，如果有样式冲突，哪个近就执行哪个。

7.2继承性

子标签会继承父标签的某些样式（以text-，font-，line-开头的都可以继承，以及color属性）。

行高的继承：

body {
    font: 12px/1.5 Microsoft YaHei;
}

如果子类没有设置行高，则继承父类行高（文字大小*1.5）。

7.3优先级

选择器	选择器权重
继承（权重为0）和 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=“ ”	1,0,0,0
!important	无穷大

div {
    color: pink!important;
}

复合选择器会权重叠加。

例：（1）div ul li - - - -> 0,0,0,3

（2）.nav ul li - - - -> 0,0,1,2

（3）a:hover - - - -> 0,0,1,1

8.盒子模型

注意：边框和内边距都会影响盒子实际大小。

8.1边框border

border-width: ;（边框粗细，单位px）

border-style: ;（边框样式）

border-color: ;（边框颜色）

border: ;（复合写法，没有顺序）

border-top: ;（只设置上边框，其余同理）

border-collapse:collapse;（相邻边框合并）

8.2内边距padding

padding-top: ;（只设置上边距，其余同理）

padding: ;（复合写法，四个值时是顺时针设置）

如果盒子本身没有指定width / height属性，padding不会撑开盒子大小。

8.3外边距margin

margin-top: ;（只设置上边距，其余同理）

margin: ;（复合写法，四个值时是顺时针设置）

外边距可以让盒子（只能是块元素）水平居中，必须满足：

（1）指定宽度（2）左右外边距都为auto

外边距嵌套块元素塌陷问题：

（1）为父元素定义边框，border:1px solid transparent;

（2）为父元素定义内边距，padding: 1px;

（3）为父元素添加overflow:hidden;

8.4清除内外边距

* {
    padding:0;
    margin:0;
  }

注意：行内元素为了兼容性，尽量只设置左右内外边距；转换为其它的就都可以了。

8.5圆角边框

border-top-left-radius: ;（只设置左上边距，top和left不能颠倒，其余同理）

border-radius: 10px ;（复合写法，四个值时是顺时针设置，数值越大弧度越大，数值也可以写成%形式）

8.6盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影位置，允许负值
v-shadow	必需，垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外部阴影改为内部阴影