CSS

CSS简介

在昨天我学完HTML基本语法之后,我今天准备加速学习CSS,加油!!!
CSS指的是Cascading Style Sheet(层叠样式表),是用来控制网页外观的一项技术。
首先我们得知道,HTML是用于控制网页的结构,而CSS用于控制网页的外观,JavaScript控制的是网页的行为。

CSS样式的引入方式

有三种方式:

  • (1)外部样式表
  • (2)内部样式表
  • (3)行内样式表

(1)外部样式表
语法:

在这里:rel、type、href都是固定的值。
(2)内部样式表

将style标签放在head标签里面
(3)行内样式表
语法:

抓紧复习

在实际开发中,一般都是使用外部样式表。
还有设置样式时注意他的id和class,通过这两个属性可以精准控制每个部分的样式,id不能相同,class可以相同。

CSS选择器

选择器就是为了选择你想要修改样式的地方的工具,相当于一个定位工具,精准定位。
有五种最实用的选择器:
(1)元素选择器
(2)id选择器
(3)class选择器
(4)后代选择器
(5)群组选择器

(1)元素选择器
选择不同的标签,来修改样式,如div、p、h1等
示例:



    
        
        CSS选择器练习
        
    
    
        

元素选择器


这是一个段落

这是一个大标题

最后一行

元素选择器


元素选择器


元素选择器


元素选择器


显示效果:
CSS_第1张图片
(2)id选择器
通过标签的属性的id来选择,id名前面加上"#"来修改样式。
示例:



    
        
        CSS选择器练习
        
    
    
        

元素选择器


这是一个段落

这是一个大标题

最后一行

元素选择器


元素选择器


元素选择器


元素选择器


显示效果:
CSS_第2张图片
(3)class选择器
通过标签的属性的class来选择,class名前面加上"."来修改样式。
示例:



    
        
        CSS选择器练习
        
    
    
        

元素选择器


这是一个段落

这是一个大标题

最后一行

元素选择器1


元素选择器2


元素选择器3


元素选择器4


显示效果:
CSS_第3张图片
(4)后代选择器
后面通过代码直接举例子
示例:



    
        
        CSS选择器练习
        
    
    
        

元素选择器


这是一个段落

这是一个大标题

最后一行

元素选择器1


元素选择器2

这是一个大标题1

这是一个大标题2


元素选择器3


这是一个大标题3

元素选择器4

这是一个段落

这是一个大标题

最后一行

显示效果:
CSS_第4张图片
(5)群组选择器
选择多个,中间以逗号隔开。
示例:


    
    CSS选择器练习
    


    

元素选择器


这是一个段落

这是一个大标题

最后一行

元素选择器1


元素选择器2

这是一个大标题1

这是一个大标题2


元素选择器3


这是一个大标题3

元素选择器4

这是一个段落

这是一个大标题

最后一行


显示效果:
CSS_第5张图片
在这五种里面群组选择器效率最高了。

你可能感兴趣的:(css前端)