脚断整理——CSS篇定义及选择器

最新推荐文章于 2024-08-07 10:08:11 发布

YvonneJue

最新推荐文章于 2024-08-07 10:08:11 发布

阅读量109

点赞数

分类专栏：脚断系列——CSS

本文链接：https://blog.csdn.net/qq_42969437/article/details/89421124

版权

脚断系列——CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的定义

CSS（Cascading Style Sheets）层叠样式表。

css关联的三种方式

内部样式表，以style标签写在页头里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font: normal bold 16px/40px "微软雅黑","宋体"
        }
    </style>
</head>
<body>
    <div>For Example</div>
</body>
</html>

内联样式表，直接在写标签后面
<div style="font: normal bold 16px/40px '微软雅黑','宋体'">For Example</div>
外部样式表，单独创建一个.css文件，在html里引用该css文件
<link rel="stylesheet" href="css地址">

标签的三种元素

1. 块级元素
- 可设置宽和高
- 独占一行
- 默认宽度是父级标签的宽度
- p这种段落标签不要嵌套块级元素
- 块级元素包括但不限于：div, p, ol, li, ul, dt, dd, dl, header, footer, aside, nav, article, section
display: block;

2. 行内元素
- 不能设置宽高
- 行内标签允许其他的行内标签排一行
- 尽量不要用行内元素嵌套块级元素
- 行内元素包括但不限于：a, span, b, u, s, i, strong, ins, del, em,
display: inline

3. 行内块元素
- 行内块其实就是一种特殊的行内标签（text-align和line-height都可使用）
- 可以和其他行内元素排一行
- 可以设置宽高
- 行内块包括但不限于：input, img
display: inline-block

选择器

选择器分为：

基础选择器
符合选择器

基础选择器：

1. 标签选择器
标签名 {属性1: 值1; 属性2: 值2; }

2. 类选择器

.box{
	font-size:12px;
}
<div class="box">内容</div>

3. ID选择器

#box{
	font-size:14PX;
}
<div id='box"></div>

4. 通配符选择器

*{
	属性1: 值1;
	属性2 : 值2;
}

注意事项：多用于页面初始化

5. 伪类选择器

a:link 没有被访问时候的状态
a:visited 访问过的状态
a:hover 鼠标浮在上面的状态
a:active 鼠标点击的状态

复合选择器

交集选择器
p .box{}
既是p标签，又是.box类名
并集选择器
div, p, h1{}
多个选择器合并选择
后代选择器
.father .grandChildren{}
子代选择器
.father > .son{}

CSS三大性

继承性
层叠性
优先级
注意事项：
- 继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
- 权重是可以叠加的

权重	0，0，0，0
标签元素	0，0，0，1
类，伪类元素	0，0，1，0
ID元素	0，1，0，0
行内样式	1，0，0，0
!important	♾

权重	0，0，0，0
div ol li	0，0，0，3
.class1 ol li	0，0，1，2
a:hover	0，0，1，1
.class1 a	0，0，1，1
#idName div	0，1，0，1

YvonneJue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录