# day 2css代码

最新推荐文章于 2023-06-30 09:36:11 发布

yigeiwoligiao_1

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量83

点赞数

分类专栏：学习记录文章标签： css

本文链接：https://blog.csdn.net/yigeiwoligiao_1/article/details/109320441

版权

学习记录专栏收录该内容

26 篇文章 0 订阅

订阅专栏

day 2前端爬虫css代码

css代码写在哪儿
内联样式表：将css代码写在标签的style属性中
内部样式表：将css代码写在style标签中
外部样式表：将css代码写在外部的css文件中,然后在html中通过link标签来导入
css语法
1）语法
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}

2）说明
选择器 - 选中当前需要添加样式的标签(在内联样式表中’选择器{}'需要省略)
属性 - 属性名有哪些是固定的(不同的样式有对应的固定属性)；
属性值如果表示的是数值大小必须加单位：px;
多个属性之间必须用分号隔开

选择器
1）id选择器 - 在id属性值前加#作为一个选择器，选中id属性是指定值的标签
例如：#user{} - 选中id属性值是user的标签（id属性是唯一的）

2）类选择器 - 在clss属性前加.作为一个选择器，选中class属性是指定值的标签
例如：.c1{} - 选中class属性是c1的所有标签

3）元素选择器 - 直接将标签名作为选择器，选中所有指定的标签
例如：p{} - 选中当前页面中所有的p标签

群组选择器 - 将多个选择器用逗号隔开作为一个选择器，选中每个选择器选中的标签
#p1,.c1{} - 选中id是p1的标签和class是c1的标签
p,a,.c2 - 选中所有的p标签、所有的a标签和所有class是c2的标签

5）后代选择器 - 将多个选择器用空格隔开
例如：div p{} - 选中直接或者间接包含在div标签中的p标签
.c1 p{} - 选中直接或者间接包含在class是c1的标签中的p标签
div .c1 p - 选中包含在div中的class是c1中p标签
6) 子代选择器 - 将多个选择器用>隔开
例如: div>p{} - 选中直接包含在div标签中的p标签
–>

    <!-- 内部样式 -->
    <style type="text/css">
        /* 这儿写的css代码 */
        #box1{
            /* 设置文字颜色 */
            color: green;
            /* 设置背景颜色 */
            background-color: yellow;
            /* 设置字体大小 */
            font-size: 30px;
            /* 设置字体宽度(粗细) */
            font-weight: 100;
            /* 设置宽度和高度 */
            width: 120px;
            height: 100px;
        }
        
        .c1{
            color: deeppink;
            
            /* border: 边框样式 边框颜色 边框的宽度
            solid  - 实线
            dotted - 点划线
            dashed - 虚线
            double - 双实线
            */
           /* 四个边一起设置 */
            /* border: solid purple 5px; */
            
            /* 四个边单独设置 */
            border-top: solid purple 5px;
            border-left: dotted purple 3px;
            
        }
        
        .c2{
            background-color: yellowgreen;
        }
        
        p{
            /* 
            添加文字装饰：
            underline  - 下划线
            line-through - 删除线
            none - 取消装饰
             */
            text-decoration: line-through;
        }
        
        a{
            text-decoration: none;
        }
        
        .c1,#box1{
            background-color: pink;
            
            /* 同时设置四个角的圆角弧度 */
            /* border-radius: 20px; */
            
            /* 分别设置四个角的圆角弧度 */
            border-bottom-left-radius: 30px;
            border-top-right-radius: 30px;
        }
        
        div p{
            text-align: center;
        }
        
        div>p{
            background-color: darkorange;
        }
    </style>
    
    <!-- 外部样式 -->
    <link rel="stylesheet" type="text/css" href="./css/css基础语法.css"/>
    
</head>
<body>
    <!-- 内联样式 -->
    <p class="c2" style="color: red;">我是段落1</p>
    
    <div id="box1">我是div1</div>
    <img src="img/logo-201305-b.png" >
    <a href="" class="c1 c2">我是超链接1</a>
    <p class="c1">我是段落2</p>
    <input type="text" name="" id="" value="" />
    <div id="">
        <a href="">我是超链接2</a>
        <p>我是段落3</p>
        <span class="c1">我是span1</span>
        <div id="">
            <span>
                <p>我是段落4</p>
            </span>
        </div>
    </div>
</body>