CSS的概述以及选择器详解

最新推荐文章于 2024-07-25 15:44:34 发布

不起眼的皮皮虾

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量172

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_36801250/article/details/105631790

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS概述

为什么需要CSS?

因为在我们写网页的时候，经常要设置元素（标签）的样式信息，但是这些样式信息并不统一，并且也不好去做设置

例如，我们在body是通过text这个属性来设置我们的字体颜色，而在font标签里面，我们又是通过color这个属性来设置字体的颜色，这样无形之中给我们编写代码添加了难度

同时，我们在设置一些共同的属性设置的时候也会很麻烦，例如，我们要把一个table表格当中所有的td中的文字内容左右居中，这个时候，按照属性的写法，我们不得不在每一个td元素的上面加上align="center"这一个设置

为了解决页面样式的问题，W3C(国际互联网标准)组织就设定了一套专门用于处理页面样式的属性，这个属性叫style,而在标准我们叫做表现形式
CSS能够解决我们的什么问题
- 统一性
  
  通过CSS我们可以统一页面的样式，无论是什么标签或元素我们都可以通过统一的CSS属性来设置它的样式，例如color="red"就是设置它的字体颜色,background-color:blue就是设置它的背景颜色,text-align:center就是设置字体居中
  
  所有的标签与元素都可以使用统一的格式去设置样式了，这样我们就没有必要单独再去记一些元素（标签）的属性和属性值
- 便捷性
  
  CSS具备一种能够，它可以批量或单独去设置页面上的某一个或某些元素的样式，它可以极大的简化我们的代码编写工作，这就解决了，我们有些样式重复书写的问题（例如每个td里面都需要去添加align="center"这样的问题了）
- 分离性
  
  所谓的分离性指的是把页面当中的html结构代码与描述其表现的形式的代码CSS分开
  
  分离性在代码上的体现为把行内样式的style属性里面的属性值拿出来，然后在head标签下下面添加一个<style></style>的标签，接下来再把样式代码写进去

CSS的基本语法

所谓的CSS其实中文名叫层叠样式表，本质上面就是在每一个元素的上面去添加了一个共同的属性，这个属性名叫style属性

style属性有它的一套特殊的写法，他的属性值是一个键值对

CSS为了解决样式的问题，确实给我们加了一个style的共通属性，但是同样的给每个元素也添加两个选择器属性，分别是class与id

行内样式

行内样式指的是在标签里面通过style属性来控制它的样式，如下所示：

<p style="color: red; background-color: blue;">这是一行文字</p>

上面的style是它的属性名，在这个属性的后面跟的是一个属性值，只是这个属性值它是通过键值对的形式体现的出来的

这种键值对的写法，我们叫css样式写法

这种键值对里面，我们叫:前面的叫css属性名,:后面的叫CSS属性值，它的语法格式如下

一个键值对写法以后，后面跟着分号结尾

<标签名 style="css属性名1:css属性值1;css属性名2:css属性值2;"></标签名>

内部样式块

为了解决CSS样式写在style时面过多的问题，并且不好书的问题，CSS提出一页面与样式分离的特殊

所谓的页面与样式分离其实就是把HTML标签和样式做单独书写，这样就形了一个标准，这个标准叫内部样式块

首先，我们需要在<head>标签里面写上一个style标签，用于编写我们的样式代码

<head>
    <style type="text/css">
    </style>
</head>

上面的代码就是在head标签里面写上了style标签，并且在style的标签里面，通过type属性来设置里面编写样式的代码是css的代码

CSS内部样式内在style当中的具体语法格式如下：

<style type="text/css">
    选择器{
        css属性名:css属性值;
    }
</style>

外部样式表

当我们的网页样式写得太多的的时候我们会发现<style> 标签的内容会为非常多，这样的我们网页代码就会很多，为了解决这个问题，我们通常会把这些css信息单独的建立一个文件，单独的保存起来通过一个叫link的标签来引入到页面当中去

<link rel="stylesheet" href="css/index.css" type="text/css" />

上面的代码就是在当前一页面当中引入了css文件夹下面一个叫index.css的文件

CSS中的选择器

标签选择器

根据HTML的标签名称在网页当中选择一个或多个的HTML标签，例如p,label,input等，所有的标签都可以使用标签选择器选中

这一种选择器是CSS当中最常有的选择器
ID选择器

在页面元素当中，我们的ID不能重复，并且不能以数字开头

CSS选择器当中，ID以#表示，如：
```
#p1{
    color:blue;
    font-size: 20pt;
}
```
上面的代码就代表了选中一个id='p1'的元素，去设置它的字体颜色 (color)与大小(font-size)

类选择器

类选择器是为了标明部分相同类型的元素的选择器，它在CSS当中以.来表明，例如.a1就相当于class='a1'

注意： 一个标签可以使用多个class样式，一个class样式可以运用于多个标签

.a1{
    font-size: 24pt;
}
.a2{
    font-family: "华文行楷";
}

<p class="a1">徐小姣</p>
<p>王芳</p>
<!--在一个页面当中，ID不能重复，并且ID名不能以数字开头 -->
<p id="p1">占琛</p>
<font class="a1 a2">钱伟强</font><br />
<label for="" class="a1 a2">标哥哥</label>
<a href="#p1">点击跳转</a>

分组选择器

分组选择器的功能有些类似于我们的class选择器，但是它不同于class就是它使用,将不同的选择器连接在一起（逗号左右两边的选择器类型可以不一致），它可以将任何选择器编成一个分组
```
#ul1,#ul2{
    list-style-type: none;
}
#ul1,#ul2,.ul3{
    border: 1px solid black;
}
```
子代元素选择器

在HTML标签当中，我们有一些元素存在父子关系，例如ul与li,table与tr及td等，这个时候我们怎么去选中他的子级元素呢

CSS提供了一种便捷的选择器>(右尖括号),它代表子级元素
后代选择器

后代选择器是对子代的一种补充，子代选择器指的是两个元素之间直接包含叫子代，后代则没有这么严格，只要是父级元素下面白，都可以叫后代

CSS当中，我们的后代选择器使用空格来代表，如：
```
<ul class="ul3">
    <li><a href="#">百度一下</a></li>
    <li><a href="#">腾讯新闻</a></li>
    <li><a href="#">京东购物</a></li>
</ul>
```
```
.ul3 a{
    color: black;
}
```
上面的选择器，如果使用子代选择器来完成则是如下写法
```
.ul3>li>a{
    color: black;
}
```
伪类/伪对象选择器

伪类/伪对象
- hover代表鼠标悬停的效果
```
table tr:hover{
    background-color: lightgray;
    color: red;
}
```
  说明：上面的代码是指当鼠标滑过我们的表格的行的时候，当前这行的背景变成浅灰色，字体颜色变成红色
- last-child选取最后一个子元素
- first-child选取第一个子元素
- nth-child(n)选中第n个子元素，它默认是从1开始数的
- first-letter 选中第一个字
- first-line 选中第一行
- active 代表鼠标点击的时候a标签的效果
- link代表a链接未被点击的时候的效果
- visited代表a连接访问以后的效果
属性选择器

属性选择器，我们使用[]来表示，例如input[type="text"] 代表的是input标签，所有type属性为text的元素

但是这些属性，我们可以不使用全局相等，可以使用模糊匹配

它在bootstarp里会大量的使用
```
img[src$=".jpg"]{
    border: 5px solid red;
}
```
上面的选择器，选择了所有的img图片，但是这些图片要是以.jpg结尾的图片，$相当于结尾匹配
```
img[src^="images"]{
    border: 5px solid red;   
}
```
上面的选择器代表选中以src为images开头的所有图片
```
img[src*="item"]{
    border: 5px solid red;
}
```
上面的选择器代表选中img图片src属性包含"item"的所有图片

兄弟选择器

我们的兄弟选择器，有两种

相邻兄弟选择器+
普通兄弟选择器~

注意： 无论是什么兄弟选择器，只能选中后面的兄弟（只能选弟弟，不能选哥哥）

<body>
    <ul class="ul1">
        <li>第一项</li>
        <li>第二项</li>
 
    </ul>
</body>
<style type="text/css">
    /*
    我们会经常使用这样的一种方法来排除第一项
    * */
    .ul1 li+li{
        color: blue;
    }
    /*
    如果说现在，我想排除第一个不给蓝色，其它的都应用于蓝色
    * */
</style>

DIV的特性

div是网页布局当中最常见的一个标签，它里面可以放任何元素，它默认的长度为100%，默认的高度为0，如果div不给出css样式，那么，在页面上面没有任何效果，这就是我们常说的div+css

DIV相当于网页当中的一条线，我们可以通过CSS来设置它的宽度与高度，也可以设置它的颜色与边框，大家在理解的时候，可以把它当成是一个盒子，这个盒子里面，我可以放任何东西

不起眼的皮皮虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的概述以及选择器详解

CSS概述为什么需要CSS?因为在我们写网页的时候，经常要设置元素（标签）的样式信息，但是这些样式信息并不统一，并且也不好去做设置例如，我们在body是通过text这个属性来设置我们的字体颜色，而在font标签里面，我们又是通过color这个属性来设置字体的颜色，这样无形之中给我们编写代码添加了难度同时，我们在设置一些共同的属性设置的时候也会很麻烦，例如，我们要把一个table表格当中...
复制链接

扫一扫

专栏目录