CSS笔记第一篇

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

xll2902526420

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

阅读量62

点赞数

文章标签： css

本文链接：https://blog.csdn.net/xll2902526420/article/details/118878905

版权

4.1Emmet语法

4.2CSS复合选择器

4.2.1后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2（后代元素）

例如：

ul li {样式声明} /*选择ul里面所有的li标签元素*/

元素1和元素2中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

        a:hover {
            color: blue;
        }

:focus伪类选择器

：focus伪类选择器勇于选取获得焦点的表单元素。

input:focus {

backgroound-color:red;

}

4.2CSS的元素显示模式

HTML元素一般分为块元素和行内元素两种类型。

注意：文字类元素内不能放块元素，<p>内不能放块元素，尤其是<div>

注意：链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

元素转换：

转换为块元素：display：block；

转换为行内元素：display：inline；

转换为行内块：display：inline-block；

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 300px;
            height: 100px;
            background-color:burlywood;
            display: block;
        }
        div {
            width: 300px;
            height: 100px;
            background-color: cadetblue;
            display: inline;
        }
        span {
            width: 300px;
            height: 100px;
            background-color: chartreuse;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">转换为块元素</a>
    <a href="#">转换为块元素</a>
    <div>转换为行内元素</div>
    <div>转换为行内元素</div>
    <span>转换为行内块元素</span>
    <span>转换为行内块元素</span>
</body>

</html>

如何让文字垂直居中？
让line-height 等于height的高度。文字的高度等于盒子的高度。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>小米侧边栏</title>
    <style>
        a {
            width: 230px;
            height: 40px;
            font-size: 14px;
            
            text-decoration: none;
            color: white;
            background-color: grey;
            display: block;
            text-indent: 2em;
            line-height: 40px;
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
    
</body>

</html>

4.2.2背景颜色

background-color属性定义了元素背景颜色。

background-color:颜色值；

一般情况下元素背景颜色默认值是transparent（透明）

背景图片

背景图片位置

background-position:x y;

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

背景图片固定：

background-attachment:scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

背景颜色半透明

background：rgba（0，0，0，0.3）；

最后一个参数是alpha透明度，取值范围在0~1之间

我们习惯把0.3的0省略掉，写为background：rgba（0，0，0，.3）

4.3CSS特性

CSS三大特性：层叠性、集成性、优先级。

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题

层叠性原则：

1.样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式

2.样式不冲突，不会层叠

继承性：

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号（text-，font-，line-这些元素开头的可以继承），以及color属性。

继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0.

优先级

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
    <style>
        /* 权重为0，0，0，1+0，0，0，1=0，0，0，2 */
        /* 字体显示为blue */
        .nav li{
            color: blue;
        }
        /* li权重是 0，0，0，1 */
        li {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>苹果</li>
        <li>西瓜</li>
        <li>桔子</li>
    </ul>
</body>

</html>

xll2902526420

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记第一篇

4.1Emmet语法4.2CSS复合选择器4.2.1后代选择器后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。语法：元素1 元素2 {样式声明}上述语法表示选择元素1里面的所有元素2（后代元素）例如：ul li {样式声明} /*选择ul里面所有的li标签元素*/元素1和元素2中间用空格隔开元素1是父级，元素2是子级，最终选择...
复制链接

扫一扫