css3学习总结（一）

素颜马尾好姑娘i 2022-11-07 11:43 160阅读 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>

# 四、属性选择器 #

# 五、伪类选择器 #

<!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>
    
    
    
    
    
    <div class="box1">
    
      <div class="box2"></div>
    
    </div>
    </body>
    
    
    
    </html>