CSS基础及选择器

最新推荐文章于 2024-04-19 05:44:53 发布

Marvellous丶

最新推荐文章于 2024-04-19 05:44:53 发布

阅读量135

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/92732958

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

一、什么是CSS

CSS概念
- Cascading Style Sheet 层叠样式表
- 表现HTML文件样式的语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS ，有利于网页被搜索引擎收录
CSS基础语法

选择器{

声明1;

声明2;

}

案例：
```
h1{
      color: red;
}
```
注意：CSS语句的最后一条声明可写可不写，但基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
Style标签

Style 标签在HTML文档中的位置，在和之间
```
<style>
     h1{
         color: red;
     }
</style>
```
引入CSS的方式
- 行内样式
  
  使用style属性引入CSS样式
```
<body>
<h1 style="color: red">Hello CSS</h1>
</body> 
```
- 内部样式表
  
  CSS代码写在的

二、基础选择器

标签选择器

HTML标签作为标签选择器的名称，标签选择器直接应用于HTML标签
```
<style>
    p{
         background: red;
    }
</style>
```

类选择器

类选择器可在页面中多次使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器
        */
        .hello{
            background: green;
        }
    </style>
</head>
<body>
<p class="hello">Hello CSS</p>
<p class="hello">Hello CSS3</p>
</body>
</html>

ID选择器

ID具有唯一性，同名的ID选择器在同一个页面中只能使用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        ID选择器
        */
        #hello{
            background: white;
        }
    </style>
</head>
<body>
<p class="hello" id="hello">Hello CSS</p>
<p class="hello" id="hello1">Hello CSS3</p>
</body>
</html>

基本选择器的优先级

ID选择器>类选择器>标签选择器（不遵循就近原则）

三、高级选择器

层次选择器
- E F 后代选择器，选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
  
  后代选择器两个选择符之间必须要以空格隔开
```
<style>
     body p{
        background: red;
     }
</style>
```
- E>F 子选择器，选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素(直接子元素，其他元素的该类子元素不会被匹配)
```
    <style>
        body>p{
            background: red;
        }
    </style>
```
- E+F 相邻兄弟选择器，选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面,若不存在这样的E和F则不会匹配
```
    <style>
        p+h1{
            background: red;
        }
    </style>
```
- E~F 通用兄弟选择器，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
```
    <style>
    /*第一个p不会被匹配*/
        p~p{
            background: red;
        }
    </style>
```

结构伪类选择器

E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-child{
            /*此处由于第一个元素不是p标签所以不会匹配*/
            background: black;
        }
        li:last-child{
            background: black;
        }

        body p:nth-child(3){
            background: blue;
        }

        body p:nth-of-type(4){
            background: deeppink;
        }
    </style>

</head>
<body>
<h1>0</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

运行结果：

在这里插入图片描述

属性选择器

E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        给基础代码添加样式
        */
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: forestgreen;
            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 5px;
        }

        /*
        属性选择器
        */
        a[id="aaa"]{
            background: yellow;
        }

        a[href="https://www.alibaba.com"]{
            background: red;
        }

        a[id^=b]{
            background: pink;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" id="aaa">1</a>
    <a href="" id="bbb">2</a>
    <a href="" id="bbbb">3</a>
    <a href="https://www.alibaba.com">4</a>
    <a href="">5</a>
</p>
</body>
</html>

运行结果：
在这里插入图片描述

Marvellous丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础及选择器

一、什么是CSSCSS概念Cascading Style Sheet 层叠样式表表现HTML文件样式的语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS ，有利于网页被搜索引擎收录...
复制链接

扫一扫

专栏目录