CSS学习笔记

最新推荐文章于 2025-11-24 23:20:58 发布

原创最新推荐文章于 2025-11-24 23:20:58 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS选择器的使用，包括基本选择器、复合选择器、伪类选择器及属性选择器等，同时深入讲解了div盒子模型的各个属性，如width、height、padding、border和margin，以及它们的简写形式。此外，还提到了CSS3新增的结构伪类和其他特性，如文本阴影、盒子阴影和圆角矩形。

CSS选择器

css语法

selector {declaration1; declaration2; ...}

h1,h2,div {color: red, font-size: 18px}

css书写方式

嵌入式：在<head>标签内使用<style>标签
外链式：在<head>标签中使用<link>标签引入
行内式：在每个标签的style属性中写css代码

css基本选择器

通用选择器：* {}
标签选择器：h1,div {}
类选择器：.class {}
id选择器：#id {}

class：类名。每个标签都可以设置的属性
id：ID名。每个标签都可以设置的属性

css复合选择器

多元素选择器：h1,h2,h3,div {}
后代元素选择器：.box h2 {}
子元素选择器：a>b {}
相邻元素选择器：a+b {}

css伪类选择器
给超链接的不同状态设置样式！

状态	选择器
正常状态	:link
访问过后状态	:visited
鼠标放上状态	:hover
激活状态	:active

伪类选择器的设置顺序：Love Hate

css属性选择器

选择器	含义
[attr]	包含 attr 属性
[attr=“val”]	attr=val
[attr^=“val”]	以 val 开头
[attr$=“val”]	以 val 结尾
[attr*=“val”]	attr 值含有 val

font[color^="re"]：先找到 font 标签，再找出 color 属性
val不区分大小写

其他特征

选择器为HTML标签，具有分组、继承功能
css语法不区分大小写
css中不能出现html标签的关键字

CSS继承优先级

只有文本、字体样式属性可以被继承！

类型	权重
标签	1
类	10
id	100
行内式	1000

不管是基本选择器，还是复合选择器，权重加起来，值越大，优先级越高！

!important

提升属性的权重值，无限大！
是提升属性的权重，不是选择器的权重
不能提升继承属性的权重

div盒子模型

属性	含义
width	内容宽
height	内宽高
padding	内填充
border	边框
margin	外边距

padding小属性

padding-top：上
padding-right：右
padding-botton：下
padding-left：左

简写描述：

padding: 10px 20px 30px 40px

顺序为上、右、下、左

margin小属性

margin-top：上
margin-right：右
margin-botton：下
margin-left：左

简写描述：

margin: 10px 20px 30px 40px

顺序为上、右、下、左

竖直方向上的margin不会叠加，取较大的值
水平方向的值会叠加

border小属性

border-top：上边框线
border-right：右边框线
border-botton：下边框线
border-left：左边框线

简写描述：

border 粗细 线型 颜色;

boder 1px solid #f00;

solid：实线
dshed：虚线

CSS3结构伪类

选择器	说明
E:first-child	匹配第一个孩子
E:last-child	匹配最后一个孩子
E:nth-child(n)	第n个
E:nth-child(2n)	第偶数个
E:nth-child(2n+1)	第奇数个
E:only-child	有且只有一个孩子

CSS3其他标签

标签	说明	举例
`text-shadow`	文本阴影	`text-shadow: 3px 4px 5px #f00;`
`box-shadow`	盒子阴影	`box-shadow: 3px 3px 3px 3px insert red;`
`border-radius`	圆角矩形	`border-radius: 10px / 20%`
`rgba`	透明度	`rgba(255, 255, 255, 0.4)`
`trabsition`	过度时间	`width: 2s, hight: 5s`