-seventy-
Welcome to my blog space.
posts - 75,comments - 0,views - 510

认识 CSS

层叠样式表

引入方式

方式一

CSS代码,直接写在 HTML 的 style 标签里

<style>
p {
color:red; /* 颜色大小控制 */
font-size:30px; /* 字号大小 */
}
</style>

方式二

在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./test.css">
rel 属性(了解)
1. rel 属性规定当前文档与被链接文档之间的关系
2. 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持

方式三

CSS代码,直接写在标签的 style 属性值里(不推荐)

<div style="color:red; font-size:20px;"> 这是div标签 </div>
行内样式,配合 JavaScript 使用

CSS 注释

/* 这是注释,CSS代码 */

CSS 特性

继承性、层叠性、优先级

作用:简化代码 ( 定位问题 ),并解决问题

1.继承性:
子级默认继承父级的文章控制属性,当然,如果子级自己有则生效自己的样式,不继承。
2.层叠性:
相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加:不同的CSS属性都生效
3.优先级:
优先级也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则
规则内容:选择器优先级高的样式生效
公式详情:
/*
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
*/
即:选中标签的范围越大,优先级越低
!important 提权功能,提高权重/优先级提到最高,慎用!!
举例:
<style>
.box {
color:blue !important;
}
</style>

选择器

作用:查找标签,从而能够设置样式

基础选择器

1.标签选择器

<style>
p {
color:red;
}
</style>
使用"标签名"(如:pdivh1...)作为选择器->选中"同名标签"设置"相同的样式"

2.类选择器

<style>
.to-red {
color:red;
}
.TO-big {
font-size:20px;
}
</style>
<body>
<p class="to-red">111111</p>
<p>222222</p>
<p class="to-red TO-big">333333</p>
</body>
查找标签,差异化设置标签的显示效果(一个标签可以使用多个类名,当 class 属性值要写多个类名时,类名与类名之间用空格隔开)

3.id选择器

<style>
#d1 {
color:red;
}
</style>
<body>
<div id="d1">111111</div>
<div>222222</p>
<div>333333</div>
</body>
id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式(注意,同一个id 选择器在一个页面只能使用一次)

4.通配符选择器

<style>
* {
color:red;
}
</style>
不需要调用,浏览器自动查找页面所有标签,设置相同的样式

复合选择器

定义:由两个或多个基础选择器,通过不同的方式组合而成
作用:更准确、高效的选择目标元素(标签)
类型:
1.后代选择器
2.子代选择器
3.并集选择器
4.交集选择器

1.后代选择器

作用:
选中某元素的后代元素(包括儿子、孙子、重孙子...)
写法:
父选择器 子选择器 {
css属性:值;
}

2.子代选择器

作用:
选中某元素的子代元素(最近的子级)
写法:
父选择器 > 子选择器 {
css 属性:值;
}

3.并集选择器

作用:
选中多组标签设置相同的样式
写法:
选择器1, 选择器2, 选择器3 {
css属性:值;
}

4.交集选择器

作用:
选中同时满足多个条件的元素(了解)
注意:标签选择器必须书写在最前面
写法:
<style>
/* 既是P标签,又是box类 */`
p.box {
color:red;
}
</style>
<body>
<p class="box">p标签,使用了类选择器</p>
<p>p标签</p>
<div class="box">div标签,使用了类选择器</div>
</body>

伪类选择器

  • 伪类表示 "元素状态",选中元素的某个状态,设置样式!
鼠标悬停状态:
选择器:hover {
CSS属性:属性值;
}
<style>
/* 任何标签都可以设置鼠标悬停的状态 */
a:hover {
color: red;
text-decoration: none;
}
.box:hover {
color:blue;
}
</style>
<body>
<a href="#">a标签</a>
<div class="box">div标签</div>
</body>
伪类---超链接
超链接共有四个状态,分别是:
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时(激活)
提示:如果要给超链接设置以上四个状态,需要按LVHA的顺序书写

文字属性

字体大小

font-size:20px

字体粗细

font-weight:400
正常:400,加粗:700

字体倾斜

font-style
不倾斜:normal,倾斜:italic

行高

line-height:20px;
直接写数字的话,将作为当前标签 font-size 属性值的倍数

字体族

font-family:Microsoft YaHei, Heiti SC;
从左往右,有这个字体就执行这个字体,没有就向右继续执行备胎字体,建议在工作中使用无衬线字体进行兜底 sans-serif

字体复合属性

font:italic 700 30px/2 楷体;
文字倾斜、文字加粗、字体大小30px、行高2倍、楷体
(注意:字号和字体必须书写,否则不生效)

文本属性

文本缩进

text-indent:2em;
推荐使用em ,若当前标签的字号的大小为16px,则1em=16px2em=32px
当然也可以使用"数字+px",但是不推荐。
首行缩进两个字实例:text-indent:2em;

文本对齐

text-align:center;
文本对齐方式: left、center、right
居中的本质是文字居中,而不是标签居中
扩展:图片居中
<style>
div {
text-align:center;
}
</style>
<div>
<img src="./images/pic.jpg" alt="这是一张猫的图片">
</div>

修饰线

text-decoration:none;
none 清除所有效果
underline 下划线
line-through 删除线
overline 上划线
例子: 清除"a标签"的下划线
<style>
a {
text-decoration:none;
}
</style>
<a>点击前往</a>

颜色

color: red;
rgb 表示法(了解)
1. rgb(r,g,b)
2. 三元色取值(0-255
rgba 表示法(开发使用)
1. rgba(r,g,b,a)
2. a 表示透明度,其取值为(0-1)
十六进制表示法(开发使用)
1. #000000#ffcc00...
2. 简写形式:#000#fc0...

背景属性

属性大全

背景色 background-color
背景图 background-image
背景图平铺方式 background-repeat
背景图位置 background-position
背景图缩写 background-size
背景图固定 background-attachment
背景复合属性 background

背景图

引用背景图

<style>
div {
width: 400px;
height: 400px;
/* 背景图默认是平铺(复制)的效果 */
background-image: url();
}
</style>
<body>
<div>div标签</div>
</body>

平铺方式

属性名: background-repeat(bgr)
属性值:
no-repeat 不平铺
repeat 平铺
repeat-x 水平方式平铺
repeat-y 垂直方式平铺
代码演示:
<style>
div {
width: 400px;
height: 400px;
background-image: url();
background-repeat: no-repeat;
}
</style>
<body>
<div>div标签</div>
</body>

背景图位置

属性名:background-position
属性值:水平方向位置,垂直方向位置,具体如下:
1.属性值方式一:关键字
left
right
center 居中
top 顶部
bottom 底部
2.属性值方式二:坐标(数字+px,正负都可以)
3.属性值方式三:上面两者混用
代码演示:
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position:center bottom;
background-position:50px -100px;
bakcground-position:50px center;
}
</style>
<body>
<div>div标签</div>
</body>

背景图缩放

属性名:background-size
属性值:
cover:等比例缩放背景图片以完全覆盖区域,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
百分比:根据盒子尺寸计算图片大小
数字 + 单位(例如:px)
代码演示:
<style>
div {
width: 600px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size:100%;
background-size:cover;
background-size:contain;
}
</style>

背景图固定

作用:背景不会随着元素的内容滚动

属性名:background-attachment
属性值:fixed

显示模式

1.块级元素(例如:div
* 独占一整行
* 宽度默认是父级的100%
* 添加宽高属性会生效
2.行内元素(例如:span
* 一行共存多个
* 尺寸由内容撑开
* 加宽高不生效
3.行内块元素(例如:img
* 一行共存多个
* 默认尺寸由内容撑开
* 加宽高属性会生效

转换显示模式

属性名:display
属性值:
block 块级 (独占一行,宽高生效) 例如:div
inline-block 行内块 (一行共存,宽高生效) 例如:img
inline 行内 (一行共存,宽高无效) 例如:span
posted on   -seventy-  阅读(30)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示