2020-11-25 CSS

最新推荐文章于 2024-05-15 20:09:31 发布

VIP文章待人要善

最新推荐文章于 2024-05-15 20:09:31 发布

阅读量237

点赞数

分类专栏：知识点记录文章标签： css

本文链接：https://blog.csdn.net/weixin_46025049/article/details/110139642

版权

CSS

优缺点：

内容和表现分离
网页机构表现统一，可以复用。
样式丰富
建议使用独立的html的css文件
利用SEO容易呗搜索引擎收录？

1.css简单的使用

语法示例

    <title>CSS学习_快速入门</title>
<!--    语法规范：styles标签可以编写CSS代码，每一个声明都需要“;”号结尾。
                选择器{
                    声明1;
                    声明2;
                    声明3;

                }
-->
    <style>
        h1{
     
            color: crimson;
        }
    </style>
</head>

<body>
<h1>一级标题</h1>
</body>

html与css分离
- 语法示例

<!--        href:css文件位置-->
<link rel="stylesheet" href="../css/style.css">

1.1、CSS三种导入方式

行内注入

<!--行内注入：在标签元素中编写一个style属性，编写样式即可-->
<h1 style=" color:red">一级标题</h1>

内部注入

     <style>
        h1{
     
            color: crimson;
        }
    </style>

外部注入（连接式）

 外部注入： <link rel="stylesheet" href="../css/style.css">

三种注入方式的优先级：遵循就近原则。
扩展：css2.1版导入式【@import url(css路径)】（将近淘汰）

  <style>
        @import url(../css/style.css);
    </style>
<!--弊端先运行body中的标签在运行style标签-->

2.选择器

2.1、基本选择器

1. 标签选择器

特性：只能选择一种标签，不可以跨标签。
语法：标签名{…}

2.类选择器

特性：可以选择一类标签，可以跨标签。
语法： .class名{…}

3.id选择器

特性：全局唯一
语法： #id{…}

<head>
    <meta charset="UTF-8">
    <title>三种选择器示例</title>

    <style>
        /* 标签选择器：只能选择一种标签，不跨标签 */
        h1{
     
            color: red;
        }

        /*类选择器：可以选择一类标签，可以跨标签*/
        .lyx{
     
            color: blue;
        }
        /*id选择器：id必须保证全局唯一，只能有一个id使用这个选择器中的样式*/
        #ln{
     
            color: blueviolet;
        }
    /* 三种选择器不遵循就近原则，id选择器>class选择器>标签选择器*/
    </style>
</head>
<body>
<h1>h1标签选择器测试</h1>
<h1>h1标签选择器测试</h1>
<h1>h1标签选择器测试</h1>

<p class="lyx">class选择器</p>
<p class="lyx">class选择器</p>
<p class="lyx">class选择器</p>

<p id="ln">id选择器</p>

注意：优先级不遵守就近原则，id选择器>class选择器>标签选择器

2.2、层次选择器

1. 后代选择器

作用域：父标签下的所有指定子标签
语法：父标签子标签{样式}
示例：

       body p{
   
         background: aquamarine;
        }

2. 子选择器

作用域：第一层子代
语法：父标签>子标签{样式}
示例：

       body>p{
   
         background: aquamarine;
        }

3. 兄弟选择器:

作用域：指定标签，同级下方相近的一个同代标签
语法：标签一 + 同级标签二{样式}
示例：

       .p2+p{
   
         background: aquamarine;
        }

4. 兄弟通用选择器

作用域：当前选中的元素，向下指定类型（或相同）的所有元素
语法：选中元素~指定元素{样式}
例：

.p2~p{
   
    background: red;
}

2.3、结构伪劣选择器

1. 首尾定位

选中元素的指定子元素定位

 <style>
    /*首元素定位*/
        ul li:first-child{
   
            background: red;
        }
    /*尾元素元素定位*/
        ul li:last-child{
   
            background: blueviolet;
        }
 </style>

2. 、根据选中子元素的父元素中子元素的顺序定位（两种方式）

第一种：p:nth-child()
- 根据父类定位元素：
  选中p的父级元素中第一个元素(如果不是相同类型则不会显示样式)

        p:nth-child(2){
   
            background: #ffc800;
        }

第二种：p:nth-of-type()
- 2.根据父类定位：
  选中p的父级元素中第指定顺修的元素(只累积所有p元素)

        p:nth-of-type(1){
   
            background: #00ff3c;
        }

两者区别： p:nth-of-type() 和p:nth-child()的区别在于，累计顺序不同，p:nth-child(),时全局无区别累计，而 p:nth-of-type()是针对某种指定某种元素累计。

3. hover选择器

作用：选择鼠标指针浮动在其上的元素，并设置其样式
注意：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
语法

/* a：指定标签 */
 a:hover{
   
            background: blue;
        }

4、属性选择器

作用：把id与class选择器结合，选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
语法示例：

       /*所有含有id属性的a标签*/
        a[id]{
   
            background: blueviolet;
        }

属性名=属性值（属性值可以为正则表达式）

常用的zhegn'ze
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾

示例：

<head>
    <meta charset="UTF-8">
    <title>属性选择器学习</title>
    <style>
    
        .dome a {
     
           float: left;
            display

最低0.47元/天解锁文章

待人要善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-11-25 CSS

CSS优缺点：内容和表现分离网页机构表现统一，可以复用。样式丰富建议使用独立的html的css文件利用SEO容易呗搜索引擎收录？1.css简单的使用语法示例 <title>CSS学习_快速入门</title><!-- 语法规范：styles标签可以编写CSS代码，每一个声明都需要“;”号结尾。选择器{ 声明1; 声明2;
复制链接

扫一扫