2021-01-26

2021-02-02 23:29:04 阅读：106 来源： 互联网

标签：26 01 color 元素样式 2021 选择器 red 属性

CSS3笔记

01.CSS简介

网页分为三个部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
-层叠样式表（网页中看到的只是最上面的一层）
-网页实际上是一个多层的结构，通过css可以分别为网页的每一层设置样式，而最终我们能看到的只是网页中最上面的一层
-总之，网页用来设置网页元素中的样式

1.1使用css来修改元素的样式

（1） 第一种方式(内联样式/行内样式）：
-在标签内部通过style属性来设置元素的样式
-问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个修改，非常不方便
-注意在实际开发中，绝对不要使用内联样式

（2）第二种方式（内部样式）：
-将样式编写到head中的style标签里
然后通过CSS选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处便可全部应用
-内部样式表更加方便对样式进行复用
-问题：
内部样式表只对一个网页起作用，它里面的样式不能跨页面进行复用
在这里插入图片描述

（3）第三种方式（外部样式表）（实际开发中的最佳实践方式）
-可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件
-外部样式表通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用
-将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
在这里插入图片描述

在这里插入图片描述

2.CSS语法

2.1选择器

选择器：通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
在这里插入图片描述

CSS常用选择器：

1.元素选择器

作用：根据标签名来选中指定的元素

语法：标签名{}

例子：p{} h1{} div{}

/* 要求：将所有段落设置为红色（字体） */
    p{
      color: red;
    }

2.id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

例子：#box{} #red{}

/* 
    将儿童相见不相识设置红色 （该p标签的id名为red）
    注意id名不能重复
*/
 #red{
      color: red;
    }

3.类选择器

类选择器

作用：根据元素的class属性值选中一组元素

语法：.class属性值

注：class是一个标签的属性，它和id类似，不同的是class可以重复使用

可以通过class元素来为元素分组
可以同时为一个元素指定多个class属性

 /* 
    将秋水共长天一色和落霞与孤鹜齐飞设置为蓝色
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>
 */
 .blue{
      color: blue;
    }

在这里插入图片描述

为一个元素指定多个class，可以用任意一个都起作用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
4.通配选择器

作用：选中页面中的所有元素

语法：*{}

 *{
      color: blueviolet;
    }

在这里插入图片描述

5.复合选择器

5.1交集选择器

作用：选中你同时复合多个条件的元素

语法：选择器1选择器2选择器3…选择器n{}

注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

例子：

 /* 将class为red的div字体大小设置为30像素 */
    div.red{
      font-size: 30px;
    }

在这里插入图片描述

5.2选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，…，选择器n{}

/* 将h1与span元素的字体设置为绿色 */
h1,span{
      color: green;
    }

6.1子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

<div>
    我是一个div
    <p>
      我是div中的p元素
      <span>我是p元素中的span</span>
    </p>
    <span>我是div中的span元素</span>
  </div>
  <span>我是div外的span</span>
  
  
  
  /* 
    为div的子元素span设置一个字体颜色红色
  */
  <style>
   div>span{
      color: red;
    }
  </style>

在这里插入图片描述

6.2后代元素选择器

作用：选中指定元素的指定后代元素

语法：祖先后代

 div span{
      color: blue;
    }

在这里插入图片描述

6.3兄弟元素选择器

6.3.1选择下一个兄弟元素：

语法：前一个+下一个

/* 选择p后面的span */
    p + span{
      color: red;
    }

在这里插入图片描述

6.3.2选择下边所有的兄弟：

语法：兄~弟

 /* 选择p后面的所有兄弟span */
     p ~ span{
      color: red;
    }

在这里插入图片描述

7.属性选择器

[属性名] 选择含有指定属性的元素

<body>
  <p title="abc">少小离家老大回</p>
  <p title="abcde">乡音无改鬓毛衰</p>
  <p title="hello">儿童相见不相识</p>
  <p>笑问客从何处来</p>
  <p >秋水共长天一色</p>
  <p >落霞与孤鹜齐飞</p>
  
</body>



/* 将所有指定了属性的元素的字体颜色设置为橘色 */
    p[title]{
      color: orange;
    }

2.[属性名=属性值] 选择含有指定属性和属性值的元素

 /* 将属性为abc的元素的字体颜色设置为橘色 */
    p[title=abc]{
      color: orange;
    }

在这里插入图片描述

3.[属性名^=属性值] 选择属性值以指定值开头的元素

/* 将属性值以abc开头的元素的字体颜色设置为橘色 */
    p[title=abc]{
      color: orange;
    }

在这里插入图片描述

[属性名$=属性值] 选择属性值以指定值结尾的元素

/* 将属性值以abc结尾的元素的字体颜色设置为橘色 */
     p[title$=abc]{
      color: orange;
    }

5.[属性名*=属性值] 选择属性值中含有指定值的元素

/* 将属性值中含有abc的元素的字体颜色设置为橘色 */
    p[title*=abc]{
      color: orange;
    }

8.伪类选择器

伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

比如：第一个子元素、被点击的元素、鼠标移入的元素…

-伪类一般情况下都是使用：开头

:first-child(第一个子元素)

:last-child(最后一个子元素)

:last-child(数字n)(选中第n个子元素)

-特殊值：

n -表示din个 n的范围0到正无穷

2n 或even -表示选择偶数位的元素

2n+1 或 odd -表示选择奇数位的元素

-以上这些伪类都是根据所有的子元素进行排序

:first-of-type

:last-of-type

:nth-of-type()

-这几个伪类的功能和上述的伪类类似，不同点是他们是在同类型元素中进行排序

:not() 否定伪类

-将符合条件的元素从选择器中去除

<body>

  <ul>
    <li class="first">第一个</li>
    <li>第二个</li>
    <li>第三个</li> 
    <li>第四个</li>
    <li>第五个</li>
  </ul>
</body>



/*将ul里的第一个li设置为红色(使用伪类选择器方式能保证始终是第一个子元素)*/
    ul>li:first-child{
      color: red;
    }
    
   /* 
    将ul里的最后一个li设置为红色(使用伪类选择器方式能保证始终是第一个子元素)
    */
    ul>li:last-child{
      color: red;
    } 
    
 /* 
    将ul里的第3个li设置为红色(使用伪类选择器方式能保证始终是第一个子元素)
    */
    ul>li:nth-child(3){
      color: red;
    }
    
    
 /* 
    将ul里的第1个li设置为红色(使用伪类选择器方式能保证始终是第一个子元素)
    */
    /* ul>li:first-of-type{
      color: red;
    } */
    
    
 /* 将ul里li除第三个外，其余都设置为绿黄色 */
    ul>li:not(:nth-of-type(3)){
      color: greenyellow;
    }

8.1 a元素的伪类

<style>

        /* 
            :link 用来表示没访问过的链接（正常的链接）
         */
        a:link{
            color: red;
            
        }

        /* 
            :visited 用来表示访问过的链接
            由于隐私的原因，所以visited这个伪类只能修改链接的颜色,其他均不能改
        */
        a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }

        /* 
            :hover 用来表示鼠标移入的状态
         */
         a:hover{
             color: aqua;
             font-size: 50px;
         }

         /*
            :active 用来表示鼠标点击
         */
         a:active{
             color: yellowgreen;
             
         }
    
    </style>

注：上述link和visited是超链接独有的，后两个是所有元素均有的

9.伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

- before 和 after 必须结合content属性来使用

/* 将第一个字母大小设置为50像素 */
        p::first-letter{
            font-size: 50px;
        }
        
        
/* 将第一行背景颜色设置为黄色 */
        p::first-line{
            background-color: yellow; 
        }
        
        
/* 将鼠标选中的元素背景颜色设置为绿黄色 */
        p::selection{
            background-color: greenyellow;
        }

before与after用法示例：

在这里插入图片描述

注：以下abc与haha均为css添加，因此鼠标无法选中

在这里插入图片描述

10.样式的继承

样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上

-继承是发生在祖先后后代之间的

- 继承的设计是为了方便我们的开发，

-*利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，*这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：

-比如背景相关的，布局相关等的这些样式都不会被继承。

11.选择器的权重

样式的冲突：

- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

例如:

<div id="box1" class="red">我是一个div </div>

<style>
	div{
		color:yellow;
	}
	
	.red{
		color:red;
	}
	/*此时div与.red则发生了样式冲突，因为它们均代表以上的div，但设置的color却不同*/
</style>

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

-优先级越高，越优先显示

选择器的权重(由高至低)

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,

选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下（后面）的样式

        .d1{
            background-color: purple !important;
        }
        .red{
            background-color: red;
            /* font-size: 20px; */
        }
 /*上面两种均为类选择器，优先级均为10，样式会显示.red的*/

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

-注意：在开发中这个玩意一定要慎用！

2.2单位

1.长度单位：

像素

- 屏幕（显示器）实际上是由一个一个的小点点构成的

- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

- 所以同样的200px在不同的设备下显示效果不一样

百分比

- 也可以将属性值设置为相对于其父元素属性的百分比

- 设置百分比可以使子元素跟随父元素的改变而改变

- em是相对于元素的字体大小来计算的

- 1em = 1font-size（一般浏览器默认字体大小（font-size）为16px）

- em会根据字体大小的改变而改变

rem（现对于html的字体大小）

- rem是相对于根元素的字体大小（html的字体大小）来计算

/* 设置根元素html的字体大小为30像素 */
 html{
            font-size: 30px;
        }

2.颜色单位

颜色单位：

在CSS中可以直接使用颜色名来设置各种颜色

比如：red、orange、yellow、blue、green … …

但是在css中直接使用颜色名是非常的不方便

可以使用的方式：

RGB值：

- RGB通过三种颜色的不同浓度来调配出不同的颜色

- R red，G green ，B blue

- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间

- 语法：RGB(红色,绿色,蓝色)

background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgb(0, 255, 0);
background-color: rgb(0, 0, 255);

在这里插入图片描述

RGBA:

- 就是在rgb的基础上增加了一个a表示不透明度

- 需要四个值，前三个和rgb一样，第四个表示不透明度

1表示完全不透明

0表示完全透明

.5表示半透明

十六进制的RGB值：

- 语法：#红色绿色蓝色

- 颜色浓度通过 00-ff

- 如果颜色两位两位重复可以进行简写

#aabbcc --> #abc
在这里插入图片描述
HSL值 HSLA值（a表示透明度）

H 色相(0 - 360)

S 饱和度，颜色的浓度 0% - 100%

L 亮度，颜色的亮度 0% - 100%
在这里插入图片描述

2.3声明块

声明块：通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成

声明是一个名值对结构

一个样式名对应一个样式值，名和值之间以:连接，以;结尾

-（如color: brown;)

标签：26,01,color,元素,样式,2021,选择器,red,属性
来源： https://blog.csdn.net/sllsusan/article/details/113352915

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-01-26

CSS3笔记

01.CSS简介

1.1使用css来修改元素的样式

2.CSS语法

2.1选择器

CSS常用选择器：

5.复合选择器

5.1交集选择器

5.2选择器分组（并集选择器）

6.1子元素选择器

6.2后代元素选择器

6.3兄弟元素选择器

7.属性选择器

8.伪类选择器

8.1 a元素的伪类

9.伪元素选择器

10.样式的继承

11.选择器的权重

2.2单位

1.长度单位：

2.颜色单位

2.3声明块