CSS样式与选择器精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41879646/article/details/103388196

1、常用样式
font-size:16px; ------ 设置字体大小
font-family:“宋体”; ------ 设置字体样式
为了防止不支持中文，出现乱码，可以使用Unicode字体
在这里插入图片描述
font-weight:bold; ------ 字体加粗，也可以写数字，如：700
font-style:italic; ------ 字体倾斜，恢复正常字体使用normal
font: 30px “新宋体”; ------ 综合写法
text-decoration: none; ------ 去掉超链接下划线
display:block; ------ 把行内元素转换为块级元素
display:inline; ------ 把块级元素转换为行内元素
display: inline-block; ------ 转换为行内块元素
text-align:center; ------ 让文字水平居中
line-height: 30px; ------ 垂直居中，假设块级元素高度为30px
background-image: url(…/image/timg.gif); ------ 设置背景图片(默认平铺)
background-repeat : repeat | no-repeat | repeat-x | repeat-y ------ 背景是否平铺：平铺 | 不平铺 | 横向平铺 | 纵向平铺
background-position: top | center | bottom | left | center | right ------ 背景位置
background-position: 10px 10px| 10px center | center 10px ------ 背景位置坐标方式
background-attachment: fixed; ------背景固定
background: 背景颜色背景图片地址背景平铺背景滚动/固定背景位置; ------ 背景简写
background-color: rgba(0,0,0,.1); ------ 背景透明
solid dashed dotted none ------ 边框：实线虚线点线无
border可以指定上下左右，如：border-top: none;
border-collapse: collapse; ------ 合并相邻的边框
父 position: relative; 子 position: absolute;top: 50%;left:50%; ------ 绝对定位
border-radius:50%; ------ 把元素变成圆形
transition:all 0.6s; ------ 过度时间(谁需要给谁加)

2、选择器
1）后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        .wangsicong ul li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>普通狗</li>
        <li>普通狗</li>
        <li>普通狗</li>
    </ul>
    <div class="wangsicong">
        <ul>
            <li>王可可</li>
            <li>王可可</li>
            <li>王可可</li>
        </ul>
    </div>
</body>
</html>

2）子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        div>strong{
            color:pink;
        }
    </style>
</head>
<body>
    <div>
        <strong>儿子</strong>
        <strong>儿子</strong>
        <strong>儿子</strong>
    </div>
    <div>
        <p>
            <strong>孙子</strong>
            <strong>孙子</strong>
            <strong>孙子</strong>
        </p>
    </div>
</body>
</html>

3）交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        p.red{
            color:red;
        }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p class="blue">蓝色</p>
    <p class="blue">蓝色</p>
</body>
</html>

4）并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        strong, .divCls{
            color:yellow;
        }
    </style>
</head>
<body>
    <strong>我和你</strong>
    <p>心连心</p>
    <span>同住</span>
    <div class="divCls">地球村</div>
</body>
</html>

链接伪类选择器

a:link;  ------ 未点击
a:visited; ------ 点击后
a:hover; ------ 悬停
a:active; ------ 鼠标点击未松手

3、CSS三大特性
层叠性、继承性、优先级
权重计算公式
在这里插入图片描述
权重叠加(没有进位)

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
注意：如果父级元素没有选中子级元素，则继承权重为0，选中则权重叠加

前端【css】