Html5+CSS3学习笔记（二）

最新推荐文章于 2024-03-17 22:35:40 发布

LiaoBuQiDeLJL

最新推荐文章于 2024-03-17 22:35:40 发布

阅读量55

点赞数

文章标签： web

本文链接：https://blog.csdn.net/LiaoBuQiDeLJL/article/details/124347979

版权

CSS篇

网页组成的3个部分：结构（Html）、表现 (Css) 、行为（Java Script）
使用Css来修改元素的样式。位置：①内联样式（在标签内通过style属性来设置元素的样式<p style =“color: red; front-size:60px:” >）②内部样式表（放在< head >中，利用< style >标签，只能对当页使用）③外部样式表（将CSS样式写入到一个外部CSS文件里，通过link标签进行引入。引入格式：<link rel="stylesheeet" href="./(路径)">）
CSS中的注释：/* */
CSS的基本语法：选择器声明块 选择器：通过选择器可以选中页面中的指定元素；声明块：通过声明块来指定要为元素设置的样式（声明块由一个一个的声明组成）

p{
  color:red;(省略号不能丟)
  font-size:40px;
}

选择器(在<head>中)：

元素选择器 ：作用：根据标签名来选中指定的元素
            语法：选择器1选择器2选择器3选择器n{}
            语法：标签名{}
            如：p{}，div{}

id选择器  ：作用：根据元素的id属性值选中一个元素      id不可以重复
            语法：#id属性值{}
            语法：标签名{}
            如：<p id="red"></p>
                #red{ 
                    color:red;
                }

类选择器  ：作用：根据元素的class属性值选中一组元素     
                 class可以重复，可以通过class属性来为元素分组，一个元素可以同时拥有多个属性
            语法：.class属性值
            语法：标签名{}
            如：<p class="bule">
                .bule{ }

通配选择器 ：作用：选择页面中的所有元素
            语法：.class属性值
            语法：*{ }

复合选择器：

交集选择器：作用：选中同时复合的多个条件的元素；
            语法：选择器1选择器2选择器3选择器n{}
            注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
            如：当修改元素div且class为red的内容时，可以写成div.red{}
                当同时要满足a、b、c类时，写成 .a.b.c{}

并集选择器：作用：同时选择多个选择器对应的元素
           语法：选择器1，选择器2，选择器n{}

关系选择器：父元素、子元素、祖先元素（直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素），后代元素，兄弟元素（拥有相同父元素的元素）

子元素选择器：作用：选中指定父元素的指定子元素
             语法：父元素 > 子元素

后代元素选择器：作用：选中指定元素内的指定后代元素
               语法：祖先 后代

选择下一个兄弟：语法：前一个 + 后一个

属性选择器：

[属性名] 选择含有指定属性的元素  如：p[title]{}  元素p中含有title属性的
[属性名=属性值] 选择含有指定属性和属性值的元素   如：p[title=abc]  元素p中含有title,且title=abc属性
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值]  选择属性值中含有某值的元素的元素

伪类和伪元素
伪类（不存在的类，特殊的类）：伪类用于描述一个元素的特殊状态，如：第一个子元素、被点击的元素、鼠标移入分元素…
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊位置）

元素的伪类一般情况下都是使用如：从开头开始算起的 （不同类之间的排序）   
 :first-child 第一个子元素      :last-child最后一个子元素       
 :nth-child( ) 选中第n个子元素
       特殊值：n 第n个 n的范围是0-n
       2n  或者 even  偶数位的元素
       20+1 或者 odd  表示奇数位的元素
 同类型元素中进行排序：b
     :first-of-type 第一个元素      :last-of-type最后一个子元素       
     :nth-of-type( ) 选中第n个子元素    如： li:first-of-type

超链接的伪类：
  :link 用来表示没访问过的链接（正常连接）（只适用于超链接）
  :visited 用来表示访问过链接，只能修改链接的颜色（只适用于超链接）
  :hover  用来表示鼠标移入的状态（不只用于超链接）
  :active  用来表示鼠标点击（不只用于超链接）

伪元素的使用：
   ::first-letter  表示第一个字母      ::first-line  表示第一行       ::selection  表示选中的内容
   ::before  元素的开始      ::after 元素的最后    before和after 必须结合content属性来使用
   如： p::first-letter{
  		    content:"ab"；/*将会在元素p的值前添上ab*/
  		    color:red;
  		}
  		<q>hello</q>/*页面显式为 "hello"  ，它会自动利用before和after添上""*/

继承：设置的样式会应用到它的后代元素上。但是并不是所有的样式都会被继承，比如背景相关的、布局相关的都不会被继承
选择器的权重
当发生样式冲突时，应按照选择器的优先级决定

选择器的权重
            内联样式      1000  （一般不用内联样式）
            id选择器       100
            类和伪类选择器   10
            元素选择器       1
            通配选择器       0
            继承的样式     没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高的，则越优先显式（p.red  优先级就是1+10）
分组优先级时单独计算的
选择起的累加不会超过其最大的数量级
可以在某一个样式后边加 !important，此时改样式会获得最高优先级，超过内联样式（慎用）

像素和百分比
像素：同样的200px在不同的设备下显式效果不同 width:200px；height:200px；
百分比：设置百分比可以使子元素跟随父元素的改变而改变
em:是相对于元素的字体大小来计算的，1em = 1 font-size ,em会根据字体大小的改变而改变
rem:是相对于根元素的字体大小来计算
颜色单位

   RGB: R红色 G绿色 B蓝色  每种颜色的范围在0 - 255之间     语法：rgb(红色，绿色，蓝色);
   RGBA：A表示不透明度 1表示完全不透明   0表示完全透明
   十六进制的RGB:#00ff00(两位表示一个颜色)
   HSL: H色相（0-360 ）   S饱和度（0%-100%）  L亮度（0%-100%）