css3学习总结（一）

最新推荐文章于 2024-09-09 11:03:57 发布

a落幕呀

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量118

点赞数

分类专栏： css学习总结文章标签： css

本文链接：https://blog.csdn.net/qq_45930294/article/details/114680998

版权

css学习总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3

一、css简介
二、css的基本用法
三、常用选择器
四、属性选择器
五、伪类选择器

一、css简介

css的基本语法：
选择器声明块
选择器选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素

声明块通过声名块设置元素的样式
声明块由一个个声明组成
声明是一个名值对结构：
一个样式名对应一个值，名和值之间用：连接以；结尾

二、css的基本用法

用css来设置样式
第一种方式：
  在标签内部用style属性来设置元素样式（内联样式）
缺点：
  使用内联样式只能对一个标签生效，如果需要多个元素，则需要复制多遍
  并且样式发生转变，需要一个个修改
  所以开发时，不要用内联样式
第二种方式：
内部样式表：
    将样式写在head中的style标签中
    然后通过css选择器来为多个标签设置格式，并且改的时候只需要修改一处
缺点
    只能对一个网页起作用
第三种方式：
    建立一个css文件，用link标签引用外部css文件
    样式可在不同网页中复用
    将样式编写到css文件中可以使用到浏览器的缓存机制，
   从而加快网页的加载速度

三、常用选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>choose</title>
    <style>
/* 
        元素选择器
          作用：根据标签名来选中指定的元素
          语法：标签名{}
        id选择器
            根据id属性值
            id属性值{}
        

*/
     #red{
         color: green;
     }
/* 
     类选择器
        作用：根据class属性值选中一组元素
        语法：.class属性值
    可以同时为一个元素指定多个class属性
*/
     .tomato{

        color: tomato;
     }
     /* .big{
         font-size: 50px;
     } */
     /* 
     通配选择器
           *  选中页面所有元素
     
     */
     /* div.tomato{
         font-size: 30px;
     } */
     /* 
     交集选择器
     作用：同时满足多个条件
     语法：选择器1选择器2选择器n{}
     交集选择器中如果有元素选择器，以元素选择器开头
     */
     h1,#red{
        font-size: 60px;
         
     }
     /* 
     并集选择器（选择器分组）
     作用：同时选择多个对应的元素
     语法：选择器1，选择器2，选择器n{}
     
     */
     /* 
     关系选择器
     父元素 
        -直接包含子元素的元素是父元素
     子元素
        -直接被父元素包含的元素
     祖先元素
        -直接或间接包含后代的元素
        -一个元素的父元素也是他的祖先元素
    后代元素
        -直接或间接被祖先元素包含的元素
        子元素也是后代元素
    兄弟元素
        —拥有相同父元素
    
    子元素选择器
        作用：选择指定父元素的指定子元素
        语法：父元素 > 子元素
    后代元素选择器
        作用：选择指定祖先元素的所有指定后代元素
        语法：祖先 后代
     */
     div span{
         color: orange;
     }
     /* 
     选择下一个兄弟
     语法：前一个+后一个
     选择下边所有的兄弟
     语法：兄~弟
     */
     /* 
        


     */
    </style>
</head>
<body>
    <h1> helloworld</h1>
    <div class="tomato big"> 我是div </div>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p class="tomato big">笑问客从何处来</p>
    <p class="tomato">落霞与孤鹜齐飞</p>
    <p>秋水共长天一色</p>
<div>
      i am a div element 
    <p> 
        i am a div's p element
        <span>i am a span</span>
    </p>
    <span>i am div's span element</span>

</div>
</body>







</html>

四、属性选择器

    <style>
    p[title]{
        color:red;

    }
    /* 
    属性选择器
    1、[属性名]{}
    2、[属性名=属性值]
    3、[属性名^=属性值]选择属性名以指定属性名开头的元素
    4、[属性名$=属性值]选择属性名以指定属性名结尾的元素
    5、[属性名*=属性值]选择属性名中含有某值的元素
    
    
    */


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

五、伪类选择器

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>weilei</title>
    <style>
        /* 
        伪类：（不存在的类，特殊的类）
        伪类用于描述一个元素的特殊状态
        伪类一般情况下都是:开头
        :first-child
        :last-child
        :nth-child()选中第n个元素，
        特殊值
            n          表示全选
            2n或even   表示选择偶数位的元素
            2n+1或odd  奇数

        以上的伪类是根据所有的伪类进行的
        :first-of-type
        :last-of-type
        :nth-of-type()
        跟上面用法类似，不同的是根据同类型的元素排序
        */
        ul > li:first-of-type{
            color:red
        }
        /* 
        :not()  否定伪类



       */
    a:link{
        color:red;
    }
    a:visited{
        color:orange;
    }
    /* 
    link  没访问过的链接(正常的链接)
    
    visited 访问过的网站
    由于隐私的原因  伪类只能改变链接颜色
    
    */
    a:hover{
        color:purple;
    }
    a:active{
        font-size: 50px;
    }
/* 
hover 鼠标移入的状态

active： 表示鼠标的点击



*/
/* 
    伪元素
    表示页面中不真实存在的元素（特殊的位置）
    伪元素::开头
    ::first-letter  表示第一个字母
    ::first-line    第一行
    ::selection       表示选中的内容
    ::before         元素的开始
    ::after         元素最后
    before和after必须结合content来使用


*/
ul{
    
    color:red;
}
/* 
    样式的继承：为一个元素设置样式会应用到后代身上
    继承是在祖先后代之间的

    注意：并不是所有样式都会被继承，比如背景相关的

    选择器的权重
        -内联样式      1000
        -id选择器      100
        类和伪类选择器  10
        元素选择器      1
        通配选择器      0
    比较优先级时，应该将所有的选择器的优先级进行相加计算，
    最后优先级越高，则优先显示

    可以在一个样式后面加 !important优先级最高  但需要慎用
 */
 .box1{
      width: 80px;
      height: 80px;
      background: green;


 }
 .box2{
    width:40%;
    height:40%;
    background: rgb(255,0,0);


 }
/* 
    百分比会跟随父元素的改变而改变
    em  相对元素的字体大小来决定
    1em=1 font-size   
    em会随着字体的大小改变而改变

    rem根据根元素的字体大小而改变


 */
 /* 
    在css中可以直接用颜色名设置各种颜色
    但是直接使用颜色名是不方便的
    所以用RGB值来表示颜色
    每一种颜色的范围在 0-255之间
    语法：RGB（红色，绿色，蓝色）

    rgba:在rgb的基础上表示透明度
    1表示完全不透明0表示透明 .5半透明

    HSL值：（一般用的不太多，大多用rgb）
    h  色相（0-360）
    s  饱和度（0%-100%）
    l  亮度（0%-100%）

 
  */
    </style>

</head>
<body>


<!-- <ul>
    <span>i am a span</span>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul> -->
<!-- 
    没访问过的链接
    访问过的链接


 -->
<!-- <a href="http://www.baidu.com">访问过的网址</a>
<br><br>
<a href="http://www.baidu123.com">没访问过的网址</a> -->
<div class="box1">

  <div class="box2"></div>

</div>
</body>



</html>