CSS基础-CSDN博客

一.CSS基础

1.1内嵌样式

5.4background-position

8.4.2去除标签默认的margin和padding

8.6行内元素margin和padding无效的特殊情况

13.2.5给父元素设置overflow：hidden

问题：绝对定位的盒子不能使用左右margin auto居中

一.CSS基础

CSS写在style标签中，style标签一般写在head标签里面，title标签下面

1.1内嵌样式

写在style标签中，style标签一般卸载head标签里面，title标签下面

作用范围：当前页面

1.2外联样式

单独的.css文件中，通过link标签引入

1.3行内样式

写在标签的style属性中

范围：当前标签

二.基础选择器

2.1标签选择器

标签名{css}

找得是一类标签，不能单独找某一个

2.2类选择器

class属性的值叫类名，类名可以由多个，用空格隔开

.类名{CSS}

2.3id选择器

id属性值在一个页面中是唯一的，不可重复

#id属性值{CSS}

2.4通配符选择器

找到页面中的所有标签，用于去除margin和padding

*{CSS}

三.字体和文本样式

3.1字体样式

3.1.1字体大小

font-size

取值：数字+px

3.1.2字体粗细

font-weigh

取值：normal（正常），bold（加粗）或数字（400，700）

3.1.3字体样式

font-style

取值：normal（正常），italic（倾斜）

3.1.4字体类型

font-family

取值：window（微软雅黑）等

3.1.5font属性的连写

font:style weight size family

只能省略前两个，省略相对于设置了默认值

3.2文本样式

3.2.1文本缩进

text-indent

取值：数字+px、数字+em（1em=当前标签的font-size的大小）

不是独占一行的元素设置text-indent无效

3.2.2文本水平对齐方式

text-align

取值：

1.左对齐：left

2.居中对齐：center

3.右对齐：right

如果让文本水平居中，text-align:center给文本的父元素设置

3.2.3文本修饰

text-decoration

取值：1.下划线：underline

2.删除线：line-through

3.没有效果：none（用来清除a标签默认的下划线）

3.3行高

line-height

取值：

1、数字+px

2、倍数（当前文字大小的倍数）

3.3.1单行文本垂直居中

line-height:文字父元素的高度

3.3.2取消上下间距

line-height:1

3.3.3和font属性的连写形式

font:style weight size/line-height family

3.4颜色常见取值

关键字

rgb表示法

rgba表示法，a表示透明度

十六进制表示法

四.选择器进阶

4.1复合选择器

4.1.1后代选择器

语法：父级选择器后代选择器 {css}

4.1.2子代选择器

语法：父级选择器>子代选择器{css}

4.2并集选择器

语法：选择器1，选择器2{css}

作用：同时选择多组标签，设置同样的样式

注意点：开发时，一个选择器一行

4.3交集选择器

语法：选择器1选择器2{css}

例：p.color1{}

4.4emmet语法

通过简写语法，快速生成代码

4.5hover伪类选择器

作用：

选中鼠标悬停在元素上的状态，设置样式

语法：

选择器：hover{css}

4.6焦点伪类选择器（只在表单出现）

场景：用于选中元素获取焦点时状态（光标点到input里面），常用于表单控件

选择器语法：

input:focus{
    background-color: skyblue;
}

效果：表单控件获取焦点时会默认显示外部轮廓线

4.7属性选择器

属性：属性名+属性值

场景：通过元素上的HTML属性来选择元素，常用于选择input标签

选择器语法：

E[attr] 选择具有attr属性的E元素

E[attr="val"] 选择具有attr属性名并且属性值等于val的E元素

五.背景相关属性

5.1background-color

属性名：background-color（bgc）

属性值：

颜色取值：关键字，rgb表示法，rgba表示法，十六进制

注意点：

背景颜色默认值是透明：rgba（0，0，0，0），transparent（a是透明度，取值0-1）

5.2background-image

属性名：background-image（bgi）

属性值：background-image：url（'图片的路径'）；

注意点：

url可以省略引号
背景图片默认在水平和垂直方向平铺

5.3background-repeat

属性名：background-repeat（bgr）

属性值：

repeat：（默认值）水平和垂直方向都平铺
no-repeat：不平铺
repeat-x：沿着水平方向（x轴）平铺
repeat-y：沿着垂直方向（y轴）平铺

5.4background-position

属性名：background-position（bgp）

属性值：background-position：水平方向位置，垂直方向位置；

1.方位名词：

水平方向：left，center，right
垂直方向：top，center，bottom

2.数字+px（坐标）：

坐标系：原点（0，0），盒子的左上角；x轴水平向右；y轴垂直向下
操作：将图片左上角与坐标的重合）

5.5连写形式

属性名：background（bg）

书写顺序：

推荐：background：color image repeat position

省略问题：

按需省略

5.6img标签和背景图片的区别

img标签：不设置宽高会显示默认宽高

div+背景图片：需要给div设置宽高，背景图不能撑开div标签

六.元素显示模式

6.1块级元素

显示特点：

1.独占一行

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div，p，h系列，ul，li，dl，dt，dd，form，header，nav，footer...

6.2行内元素

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

a，span，b，u，i，s，strong，ins，em，del...

6.3行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

input，textarea，button，select...

特殊情况：img

6.4三种显示方式的转换

语法：

display：block //转换成块级元素

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

display：inline    //转换成行内元素

6.5html的嵌套方式

(1).块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素...

但是：p标签中不要嵌套div，p，h等块级元素

(2).a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

6.6居中方法总结

6.6.1水平居中

text-align:center

文本、行内元素（span、a）、行内块元素（input、img）

需要让以上元素水平居中，此时直接给以上元素的父元素设置即可

6.6.2垂直居中

margin:0 auto;

块级元素（div、p、h、盒子）直接给当前元素设置

七.CSS三大特性

7.1继承性

特性：子元素默认继承父元素样式的特点

可以继承的常见