标签：Web color 标签前端开发样式表 div 选择器 CSS 属性

CSS层叠样式表

CSS是层叠样式表，主要用来控制调整网页的样式，它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式。

在网页上实现CSS样式调整一般有两种方式：

内嵌式

将CSS代码集中写到HTML文档的头部head标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是直接在HTML文件中直接添加CSS样式的方式；
嵌入式

是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。

CSS主要用来调节HTML标签的样式

-html标签的两大重要属性

在网站页面中，内容都是由HTML构成的，并且上面有很多一样的HTML标签。当我们想修改标签的样式时，需要通过标签的两大属性来进行区分

标签的两大重要属性的作用：用来区分标签

1.class属性

将标签分门别类，主要用于批量查找
每个标签都可以设置1个或者多个class
class属性一般专门用于给某个特定的标签设置样式的

类似于面向对象中的类

2.id属性

精确查找标签，主要用于点对点
每个标签都可以设置唯一一个id
前端开发中id一般不用于设置样式，一般由js来使用id属性

class 和 id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字p、a、img等

一、CSS语法结构

学习CSS的流程

（1）先学习如何查找标签

（2）再学习如何调整样式

1.语法结构

css语法分为：① 选择器②声明

声明由属性和值组成，多个声明之间用分号分割

选择器{
    样式名1:样式1,
    样式名2:样式2
}

2.CSS注释语法

# 支持单行、多行
/*注释语法*/

3.引入CSS的多种方式

（1）嵌入式

在html 的 head标签内 style标签内部写

<style> 
    h {
        color: cornflowerblue;
    }
</style>

（2）外链式

html内通过link标签引入外部css文件

<link rel="stylesheet" href="mycss.css">

myscss.css文件

h1 {
    color: cornflowerblue;
}

（3）内联样式

在标签内部通过style属性直接编写

   <h1 style="color: cornflowerblue">天天开心</h1>

不推荐使用，增加了html标签与css样式之间的耦合，拓展性较差

优先级

行内式 > 嵌入式、外链式

嵌入式、外链式之间：
代码自上而下运行，谁靠近标签，谁的优先级高

二、CSS选择器

CSS选择器会贯穿整个web前端开发，包括爬虫

1.CSS基本选择器

（1）标签选择器

直接按照标签名查找标签，进行范围查询/批量查询

用法：标签名{}

标签名称 {
  属性名:属性值
}

div{
     color: rebeccapurple;
}

（2）类选择器

按照标签的class值，查找标签

用法：. + class值{}

.class的值 {
  属性名:属性值
}

.c1{
    color: rebeccapurple;
 }

（3）id选择器

按照标签的id值，精准查找

用法：# + id值{}

#id值 {
  属性名:属性值
}

#d1 {
    color: red;
}

（4）通用选择器

直接选择页面所有的标签

用法：* {}

 * {
   color: red;
}

2.CSS组合选择器

标签之间嵌套的关系

    <p>ppp</p> /*div的哥哥标签*/
    <p>ppp</p> /*div的哥哥标签*/
    <div>
        <p>divdiv /*div的儿子标签*/
            <span>divdivspan</span> /*div的孙子标签*/
        </p>
        <p>ppp</p> /*div的儿子标签*/
        <span>divspan</span> /*div的儿子标签*/
    </div>
    <p>ppp</p> /*div的弟弟标签*/
    <span>spanspan</span> /*div的弟弟标签*/

对于标签的上下层级以及嵌套关系称呼：

祖先标签、父标签、后代标签、子标签、哥哥标签、弟弟标签、...

（1）后代选择器

作用：找到标签的指定的所有后代标签
符号：空格
后代选择器可以通过空格一直延续下去

父标签 后代标签{
  
}

div span{
    color: red;
}

（2）子标签选择器

作用：找到指定标签所有的指定的儿子标签(只指定儿子标签，不会查找其他嵌套的标签)
符号： >
子标签选择器可以通过>符号一直延续下去

父标签>子标签 {
    属性名:属性值;
}

div>span{
        color: red;
}

（3）毗邻选择器

作用：选择同级别下面紧挨着的标签
符号： +
只选择同级别紧挨着的下面的指定标签，不选择紧挨着的上面的标签

div+span{
            color: red;
        }

（4）弟弟选择器

作用：查找同级别下面所有的弟弟标签
符号：~

标签1>标签1的所有弟弟标签 {
    属性名:属性值;
}

div~span{
            color: red;
}

3.选择器的分组与嵌套

（1）合并查找

多个选择器合并查找

语法

选择器1,选择器2,选择器3 {
    属性名:属性值;  
}

例：

div,p,span {
            color: red;
        }
或者
div,
p,
span {
            color: red;
        }

（2）混合使用

选择器混合使用

查找class的值为c1的 p标签

p.c1 {
    color: red;
}

查找id是d1的div标签

div#d1 {
    color: red;
}

查找含有c1样式值（样式类）里面p标签中含有c2样式值的标签

.c1 p .c2{
           color: red;
       }

4.属性选择器

按照属性名查找

[name]

按照属性名=属性值查找

[name="duoduo"]

查找name为duoduo的所有div标签

div[name="duoduo"]

查找name以duoduo为开头的所有div标签

div[name^="duoduo"]

查找name以duoduo为结尾的所有div标签

div[name$="duoduo"]

查找name中包含duoduo的所有div标签

div[name*="duoduo"]

5.伪类选择器

（1）a标签

a标签中，没有跳转过网址的a标签默认是蓝色，点击过的则为紫色

a标签	代表的状态
a:link	未被访问过的初始状态
a:hover	鼠标悬浮在该目标时的状态
a:active	鼠标按下时的状态
a:visited	以及被访问过的状态

a:link {
    color: black;
}

a:hover {
    color: red;
}

a:active {
    color: green;
}

a:visited {
    color: cornflowerblue;
}

a标签中添加了target="_blank"还是无法在新窗口中打开链接，可以在head标签中添加
<head><base target="_blank" /></head>

（2）input标签

获取焦点、失去焦点，焦点代指鼠标

input获取焦点（被点击）之后采用的样式

input:focus {
        background-color: pink;
}

6.伪元素选择器

通过css来渲染文本

标签	作用
p:first-letter	首字母
p:before	在文本开头CSS渲染
p:after	在文本末尾CSS渲染

css添加文本，在html中无法正常选中

        p:first-letter {
            font-size: 46px;
            color: red;
        }
        p:before {
            content: "CSS渲染文本前";
            color: blue;
        }
        p:after {
            content: "CSS渲染文本后";
            color: violet;
        }

三、选择器优先级

1.选择器相同，导入方式不同

就近原则

2.选择器不同，导入方式不同

内联样式 > id选择器 > 类选择器 > 标签选择器

四、CSS样式

1.字体样式

font_size:48px;

字体粗细

font_weight:lighter;

字体颜色

# 直接填写
color:red;    
# 编号
color:#3d3d3d;
# rgb编码
color:rgb(0,0,0)
      rgba(0,0,0,0) 最后一位填写透明度

取色器工具

文本位置

text-align:center;

文本装饰

text-decoration:none
主要用于取消a标签的下划线

文本缩进

页边距大小

text-indent:32px;

例：

div {
    font-size: 48px;
    font-weight: bolder;
    color:rgba(200,102,0,0.5) ;
    text-align: left;
    text-decoration:underline;
    text-indent:100px;
}

2.背景属性

宽度/长度：以像素为单位，宽或高一般只指定一个，另一个会按照图片尺寸来等比例放大缩小

width:800px;
height:800px;

背景颜色

background-color: orange;

添加背景图片

url(网页链接/本地连接)

图片如果超出指定像素大小，会自动截取或者自动铺满指定范围

background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");

background-image: url("666.png");

背景重复

 background-repeat:repeat(默认):背景图片平铺排满整个网页
 background-repeat:repeat-x：背景图片只在水平方向上平铺
 background-repeat:repeat-y：背景图片只在垂直方向上平铺
 background-repeat:no-repeat：背景图片不平铺

背景位置

background-position: center center

当属性名相同时，可以采用便捷写法

background:  url("666.png") blue no-repeat center center;

例：

div {
    width: 800px;
    height: 800px;
    background-color: orange;
    background-image:url(""https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-01-1apple.png"") ;
    background-repeat: repeat-x;
    background-position: center center
	}

标签：Web,color,标签,前端开发,样式表,div,选择器,CSS,属性
From： https://www.cnblogs.com/DuoDuosg/p/16942615.html

Web前端开发：CSS层叠样式表