CSS基本知识点整理（一）

最新推荐文章于 2022-07-19 21:34:38 发布

江泽09

最新推荐文章于 2022-07-19 21:34:38 发布

阅读量102

点赞数

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/m0_48622990/article/details/119492831

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS介绍：

层叠样式表，用来修饰文档的语言，让文档以更优雅的形式呈现给用户，也是为了将内容跟样式相分离，提高工作效率。
1996年12月第一份正式标准完成CSS；1998年5月，CSS规范第二版出版；1999年开始修订，2001年完成了CSS3工作草案。
CSS工作原理：HTML文件->解析HTML文件同时加载CSS->解析CSS->将样式加到文档里->转换成DOM->展示给用户。
CSS核心功能：给特定的属性设置特定的值。
CSS属性和值：大小写敏感、通过“:”分割。
CSS属性和属性之间：通过“;”分割。
CSS声明块：将多个CSS声明写在一起，声明和声明之间通过“;”分割，使用“{}”将多个声明括起来，形成一个声明块。
CSS的应用：HTML文档如何使用CSS

        1.外部样式表新建.css 后缀的文件，然后在Html内通过link引入 <link rel="stylesheet" href="课程内容1.css">

        或者在style标签中的第一行，通过@import "xxx.css"引入

        2.内部样式表将CSS写到html的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但是不建议这样使用。

        3.行内样式表将CSS写到元素的style属性中，只能作用于一个元素，但是不建议这样使用。
优先级：行内样式表>内部样式表>外部样式表

2.CSS选择器：

标签选择器：标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素
类选择器：类选择器以.开头，后面紧跟类名，不允许又空格，与元素的class属性值保持一致，一个元素可以有多个class值
id选择器：id选择器以#开头，后面紧跟id名，与元素的id属性值保持一致，在一个文档中，id值不能重复，所以这个一般选择唯一元素
普遍选择器：使用*来表示普遍选择器，表示选择所有元素，通常用在组合选择器中
层次选择器：后代选择器（#app p 包括子元素，也包括孙子元素，子子孙孙）子代选择器（">" 表示的是父元素的直接子元素）相邻同胞选择器（使用“+”隔开选中下一个兄弟元素 .myDiv+* 选的是class为myDiv的元素的下一个兄弟元素）一般同胞选择器（.myP~* 选的是class为myP的元素的后面的所有兄弟元素）
多选择器：多个选择器组合使用，用","分割
嵌套选择器：多个选择器嵌套使用，如div.myDiv
属性选择器：[title]{color:green} [title=div2]{color:green} [title^=di]{color:green}(以属性是包含title,属性值是di开头。) [title$=di]{color:green}(以属性是包含title,属性值是di结尾。) [title*=di]{color:green}(模糊匹配以属性是包含title,属性值包含di（只要有这个字符串就行）。) [title~=di]{color:green}( 以属性是包含title,并且title属性值有di（必须是目标字符串）。)
伪类选择器：以':'开头，用于其他选择器之后，指明元素在某种状态下才能被选中。:only-child 独生子元素 :first-child 第一个孩子元素 last-child 最后一个孩子元素 nth-child(n) 第n个孩子元素 n从1开始 nth-last-child(n) 倒数第N个孩子元素 first-of-type 选中app类子代的每种类型的第一个孩子元素

3.与元素状态相关的一些属性：

:hover
:link a标签未被访问过的状态
:visited a标签已被访问过的状态
:active 活动时的状态
:focus 聚焦时的状态
:checked 列表框被选中时的状态
:default 默认选中时的状态
:disabled 表单项禁用时的状态
:enabled 表单项可用时的状态
:valid 通过表单验证
:invalid 不通过表单验证
:required 必填项
:option 选填项
:in-range 在范围内
:out-of-range 不在范围内

4.伪元素选择器

"::" 开头，用在其他选择器之后
"::before" 选中之后不存在的结点，然后结合content 添加内容
"::after" 选中之后不存在的结点，然后结合content 添加内容
first-letter 改变p文本中的第一个字符
first-line 改变p文本中的第一行字符
section 选中的文本会改变样式

5.CSS优先级：

!important>行间样式>id选择器>class选择器|属性选择器>标签选择器>通配符选择器
CSS权重： !important Inifinity(正无穷)

行间样式 1000

id 100

class|属性|伪类 10

标签|伪元素 1

通配符 0

6.样式继承：

有些规则会被子元素默认继承
会被继承的：font 文本列表 cursor等
不会被继承的：magin padding border等
三个特殊的值来改变继承关系：
        将可继承属性改为不可继承 color:initial;

        将不可继承属性改为不可继承 border:inherit;

        跟随默认情况 color:unset;

7.CSS中的一些单位值：

颜色：

关键字：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
rgb()
三个参数rgb(0-255，0-255，0-255) 红绿蓝
rgb（204, 247, 202）
rgba()
三个参数rgb(0-255，0-255，0-255，0-1) 红绿蓝代表透明度 0完全透明 1完全不透明
十六进制
#六个十六进制的数两个代表一个通道红绿蓝 0-F
#aaa = #aaaaaa
#602653
HSL
第一个参数色调 0-360 0 红色 120 绿色 240 蓝色
第二个参数饱和度 0-100% 0 灰色 100% 全彩
第三个参数亮度 0-100% 0 黑色（暗） 100%白色
background-color: hsl(120, 100%, 50%);
HSLA
透明度 0完全透明 1完全不透明
background-color: hsla(120, 100%, 50%, 0.5);

长度宽度大小
百分比占父元素的百分比
px 像素 mm cm in(英寸)
相对值单位

em
1em和当前字体大小相同(一个M的宽度)
默认字体大小如果默认是16px 那1em = 16px
font-size=20px;那1em = 20px
rem
总是等于默认字体大小如果默认是16px 那1rem = 16px

文本样式

color 字体颜色
font-size
font-family 字体（宋体、楷体、微软雅黑、、、）
WebFont 商用（花钱）兼容性不太高
在线字体和在线图标引入方式参考8-字体.html
font-style i normal italic oblique
font-weight b 100-900
normal 默认400
bold=700
lighter 比父元素字体更细
bolder 比父元素字体更粗
text-align left center right
text-transform 文本变形 none
uppercase
lowercase
capitalize
full-width 转换为类似于等宽的字体
text-decoration
text-decoration-style
text-decoration-color
text-decoration-line

text-shadow

江泽09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本知识点整理（一）

1.CSS介绍：层叠样式表，用来修饰文档的语言，让文档以更优雅的形式呈现给用户，也是为了将内容跟样式相分离，提高工作效率。 1996年12月第一份正式标准完成CSS；1998年5月，CSS规范第二版出版；1999年开始修订，2001年完成了CSS3工作草案。 CSS工作原理：HTML文件->解析HTML文件同时加载CSS->解析CSS->将样式加到文档里->转换成DOM->展示给用户。 CSS核心功能：给特定的属性设置特定的值。 CSS属性和值：大小写敏感、通过“:
复制链接

扫一扫