HTML5+CSS3 从入门到精通（2）_html-js-css

CSS是什么？

常用选择器

1. id选择器

2. 类选择器

3. 通用选择器

复合选择器

1. 交集选择器

2. 选择器分组（并集选择器）

关系选择器

1. 子元素选择器

2. 后代选择器

3. 兄弟选择器

4. 通用兄弟选择器

属性选择器

伪类选择器

:first-child

:last-child

:nth - child( )

:first - of - type

:last - of - type

:nth - of - type

:not( )否定伪类

超链接的伪类

:link

:visited

:hover

:active

伪元素

::first - letter

::first-line

::selection

编辑::before

::after

继承

选择器的权重

! important

像素和百分比

em 与 rem

RGB值

RGB

RGBA

hsl

CSS是什么？

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”。

CSS作用：

CSS 的主要作用是美化网页，对网页中元素的位置、字体、颜色、背景等属性进行精确控制。

CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。

常用选择器 1. id选择器

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

语法: #id属性值
例子: #box{ }




    
    
    
    Document

2. 类选择器

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

语法: .class属性值

注意: 类选择器的定义需要用到一个英文的句号.




    
    
    
    Document

3. 通用选择器

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

语法: *

用途：通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距。

*{
    margin: 0;
    padding: 0;
  }

复合选择器 1. 交集选择器

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

语法: 选择器1选择器2选择器3选择器n { }

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




    
    
    
    Document
    


    
        hello world
    

    
        你好~ 朋友

运行结果如下图所示：

2. 选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{ }
比如：#b1,.p1,h1,span,div.red{ }




    
    
    
    Document
    


    我是h1标题
    我是h2标题
    我是h3标题

未设置字体大小前：

设置后：

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

子选择器只会匹配某个元素的直接后代

选择器之间用大于号 > 分隔开




    
    
    
    Document
    


    
        我是第一个span
        
            我是第二个span

运行结果如下图所示：

2. 后代选择器

后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开




    
    
    
    Document
    


    
        我是第一个span
        
            我是第二个span

运行结果如下图所示：

3. 兄弟选择器

一、相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。

二、相邻兄弟选择器的定义需要用到加号 +，加号两边为相邻的两个元素，选择器会匹配加号后面的元素。




    
    
    
    Document
    


    
        我是第1个span
        
            我是第2个span
        
        我是第3个span
        我是第4个span
        我是第5个span
        我是第6个span

运行结果如下图所示：

4. 通用兄弟选择器

通用兄弟选择器需要用到波浪号 ~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素




    
    
    
    Document
    


    
        我是第1个span
        
            我是第2个span
        
        我是第3个span
        我是第4个span
        我是第5个span
        我是第6个span

运行结果如下图所示：

属性选择器

一、属性选择器用来匹配具有特定属性的元素。

二、属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息。




    
    
    
    Document
    


    第一个
    第二个
    第三个
    第四个

运行结果如下图所示：




    
    
    
    Document
    


    第一个
    第二个
    第三个
    第四个

运行结果如下图所示：




    
    
    
    Document
    


    第一个
    第二个
    第三个
    第四个

运行结果如下图所示：




    
    
    
    Document
    


    第一个
    第二个
    第三个
    第四个

运行结果如下图所示：




    
    
    
    Document
    


    第一个
    第二个
    第三个
    第四个

运行结果如下图所示：

伪类选择器

伪类（不存在的类，特殊的类) - 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素... 伪类一般情况下都是使用 : 开头

:first-child




    
    
    
    Document
    


    
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

:last-child




    
    
    
    Document
    


    
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

:nth - child( )

特殊值:
n表示第n个，n的范围0到正无穷
2n 或 even表示选中偶数位的元素

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




    
    
    
    Document
    


    
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

: first - of - type

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




    
    
    
    Document
    


    
        我是span
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

: last - of - type




    
    
    
    Document
    


    
        我是span
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

: nth - of - type




    
    
    
    Document
    


    
        我是span
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

:not( )否定伪类

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

注意：:nth-child()是整体一个大的排序，而:nth-of-type()是同类型的排序




    
    
    
    Document
    


    
        我是span
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：




    
    
    
    Document
    


    
        我是span
        我是第1个
        我是第2个
        我是第3个
        我是第4个
        我是第5个

运行结果如下图所示：

超链接的伪类 :link

:link 用来表示没访问过的链接（正常的链接)

当点击链接为#的超链接，链接就会变一个颜色，而没访问过的链接就是正常的蓝色

如下图：

注： javascript:; 与 # 都可用作超链接的占位符

我们可以用:link来设置没访问过的链接




    
    
    
    Document
    


    访问过的
    

    我是没访问过的

运行结果如下：

:visited

:visited用来表示访问过的链接




    
    
    
    Document
    


    访问过的
    

    我是没访问过的

运行结果如下：

注意：link 和 visited 只能给a使用，是超链接独有的

:hover

: hover用来表示鼠标移入的状态




    
    
    
    Document
    


    访问过的
    

    我是没访问过的

运行结果如下：

:active

: active用来表示鼠标点击




    
    
    
    Document
    


    访问过的
    

    我是没访问过的

运行结果如下：

补充：

链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

hover 和 active 可以绑定任意元素

伪元素

伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置)
伪元素使用::开头

::first - letter ::first-line

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

::first - line 表示第一行




    
    
    
    Document
    


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.

运行结果如下：

::selection

表示选中的内容




    
    
    
    Document
    


    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.

运行结果如下：

::before ::after

: : before元素的开始

: : after元素的最后
- before 和 after 必须结合content属性来使用

通过 content 属性来为一个元素添加修饰性的内容，此元素默认为行内元素。




    
    
    
    Document
    


    您好啊
    欢迎来学习

运行结果如下：

继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上继承是发生在祖先与后代之间的
继承的设计是为了方便我们的开发
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
这样只需设置一次即可让所有的元素都具有该样式




    
    
    
    Document
    


    hello world
        我是第一个span
    

    我是第二个span

运行结果如下：

注意:

并不是所有的样式都会被继承
比如背景相关的，布局相关……这些样式都不会被继承。




    
    
    
    Document
    


    hello world
        

        我是第一个span
    

    我是第二个span
        我是第三个span

运行结果如下：

选择器的权重

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重：

内联样式id选择器类和伪类选择器元素选择器通用选择器继承的样式 (没有优先级)
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的)选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器如果优先级计算后相同，此时则优先使用靠下的样式

即使同一类相加起来再高，也不会超过其最大级




    
    
    
    Document
    


    
        您好！

运行结果如下：

! important

可以在某一个样式的后边添加 ! important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中这个一定要慎用！




    
    
    
    Document
    


    
        您好！

运行结果如下：

像素和百分比

长度单位：
        像素
        屏幕（显示器）实际上是由一个一个的小点点构成的
        不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样

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

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




    
    
    
    Document

运行结果如下：

em 与 rem

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

1em = 1 font-size

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

rem

rem是相对于根元素(html)的字体大小来计算




    
    
    
    Document

运行结果如下：




    
    
    
    Document

运行结果如下：

RGB值 RGB RGB通过三种颜色的不同浓度来调配出不同的颜色R red, G green, B blue每一种颜色的范围在0 ~ 255 (0% - 100%)之间语法: RGB(红色, 绿色, 蓝色)




    
    
    
    Document

运行结果如下：

RGBA 就是在rgb的基础上增加了一个a，a表示不透明度需要四个值，前三个和rgb一样，第四个表示不透明度1表示完全不透明，0表示完全透明，.5半透明




    
    
    
    Document

运行结果如下：

十六进制的RGB值

语法:#红色绿色蓝色颜色浓度用 00~ ff 调整如果颜色两位两位重复可以进行简写

例如：

#aabbcc > #abc

#aabbce 不可简写

hsl

hsl值与 hsla值

h色相(0 - 360)s饱和度，颜色的浓度0% -100%l亮度，颜色的亮度0%-100%a不透明度




    
    
    
    Document

望大牛指点，更新中…

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/924899.html

HTML5+CSS3 从入门到精通（2）

发表评论

评论列表（0条）