前端基础--CSS

最新推荐文章于 2024-11-12 22:56:44 发布

是紫乐呀

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量47

点赞数 1

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/liItong/article/details/129917713

版权

CSS用于定义网页的样式，包括颜色、布局和字体等。它可以内联、内部或外部引入。优先级为行内样式>内部样式/外部样式。选择器如标签选择器、类名选择器和ID选择器用于定位元素。权重计算涉及标签、类名和ID的特定数值。此外，文章还介绍了宽度、高度等基本样式属性。

摘要由CSDN通过智能技术生成

 css:层叠样式表
            作用：修饰网页样式

            语法格式： 
                {
                     属性:属性值;
                     属性:属性值;
                     属性:属性值;
                     属性:属性值;
                     ....
                }

            css引入方式
                1.内联样式 （行间样式，行内样式，嵌入式样式、内嵌样式）
                    <p style="属性:属性值;....."></p>
                2.内部样式
                    <style>
                        标签{
                            属性:属性值;
                            属性:属性值;
                            .....
                        }
                    </style>
                    
                    存放位置：一般放在<head></head>结束之前（用户体验更好）
                3.外部样式
                    a.创建css文件
                    b.引入
                        <link rel="stylesheet" href="路径">
                           rel="stylesheet"---关联样式表
                        
                        存放位置：一般放在<head></head>结束之前（用户体验更好）


            css引入的优先级
                    行内样式>内部样式|外部样式
                    内部样式和外部样式，选择标签类型一致（选择器）的情况下，看引入的先后顺序

            选择器：选择对应的容器（标签，元素）
                    1.标签选择器（标记选择器）
                        标签名{
                            属性：属性值；
                        }
                    2.类名选择器（class选择器）
                        .类名{
                            属性：属性值；
                        }
                        注意：  
                            一个类名可以给多个标签(没有标签类型限制)使用
                            一个标签可以起多个类名
                    3.id选择器
                        #id名{
                            属性：属性值；
                        }
                        注意：id具有唯一性（多个id名称一样可以出现，行业规定不允许）
                    4.后代选择器（只要是后代就可以）
                        选择器1 选择器2{
                            属性：属性值；
                        }
                        选择器1，选择器2可以是标签名，也可以是类名或者id名
                    5.群组选择器(多个元素用逗号隔开)
                        选择器1,,选择器2，.....{
                            属性：属性值；
                        }
                        选择器1，选择器2可以是标签名，也可以是类名或者id名
            
            权重（四位数）
                标签的权重：0001
                类名的权重：0010
                id的权重:  0100
                行内的权重是1000
                后代选择器的权重：权重之和
                    .list li{--------11
        
                    }
                    #names  b{---------101
        
                    }
                    ul li{---------2
                        
                    }

            
            css样式
                    width:200px;-----------宽度
                    heigth:200px;----------高度
                    background-color:red;--------背景颜色
                    color:pink;------------------文字颜色
                    font-size:50px;------------- 文字大小