初识CSS3

一、CSS:
1.概念:是一个层叠样式表,用来美化网页的。
2.优势:
(1)内容与表现分离
(2)表现的统一,并且容易修改
(3)丰富的样式,使得页面布局更加灵活
(4)减少网页的代码量
(5)运用独立的css文件,有利于搜索引擎的收录
3.基本构成:选择器和声明
4.行内样式:
(1)语法:

(2)常用属性:
color:字体颜色
background:背景颜色
width:宽
height:高
font-size:字体大小,值是数字+px
border:边框,值:1px solid black;
(3)注意事项:
每个属性值后面必须要用;隔开
属性必须都放在style的双引号里面
属性与值用:隔开
5.内部样式:
1.在标签里面写
————————————————
1.标签属于XHTML,@import是属于CSS2.1

2.使用链接的CSS文件先加载到网页当中,再进行编译显示

3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

CSS样式优先级

 1.行内样式>内部样式表>外部样式表              2.就近原则

CSS3基本选择器:1.标签选择器 2.类选择器 3.ID选择器

HTML标签作为标签选择器的名称

、 小结:

1.标签选择器直接应用于HTML标签

2.类选择器可在页面中多次使用

3.ID选择器在同一个页面中只能使用一次

基本选择器的优先级

  ID选择器>类选择器>标签选择器

注:标签选择器不遵循“就近原则”,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS的高级选择器: 1.层次选择器 2.结构伪类选择器 3.属性选择器

一.引入样式

1.行内样式表

10-30


2.内部样式表(在head标签里面,title标签下面)

优点

方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

3.外部样式表

嵌入式

导入式

嵌入式和导入式的区别:

1.标签属于XHTML,@import是属于CSS2.1

2.使用链接的CSS文件先加载到网页当中,再进行编译显示

3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
4.样式优先级: 行内>内部>外部 就近原则

二.基本选择器

1.标签选择器(通过标签名称定位)

h2{

color: red;

  }

2.类选择器(通过标签中class属性的值定位,值可以重复,不能以数字开头)

.class01{

color:yellow;

}

10-30

10-31

3.ID选择器(通过标签中id属性的值定位,值不可以重复,不能以数字开头)

#id01{

   color: red;      

}

10-30

10-31

4.基本选择器的优先级 不遵循就近原则,无论哪一种样式表的导入,都遵循:id选择器>类选择器>标签选择器 三.高级选择器

1.层次选择器

/后代选择器/

li p{

   background-color: yellow;    

 }       

/子选择器/

body>p{

       background-color: aqua;   

  }  

   /*相邻兄弟*/     

.class01+p{        

 background-color: red;   

  }  

   /*通用选择器*/     

.class01~p{

        background-color: blue;    

 }

2.结构伪类选择器

ul li:first-child{

   background-color: yellow;   

  }      

ul li:last-child{

   background-color: red;     

}      

ul li:nth-child(even){

background-color: blue;

}

/匹配元素类型/

p:first-of-type{

    background-color: pink;

    }   

  p:last-of-type{          

background-color: green;

   }     

p:nth-of-type(3){     

    background-color: aqua;  

   }

3.属性选择器

/包含id属性/

a[id]{

     background-color: red;   

  }

/包含target属性,并且值为_blank/

a[target=_blank]{        

 background-color: yellow;     

}

/包含title属性,并且值以we开头/

a[title^=we]{

  background-color: aqua;     

}

/包含title属性,并且值以e结尾/

a[title$=e]{

   background-color: black;    

 }

/包含class属性,并且值包含it/

   a[class*=it]{    

     background-color: blue;     

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML(HyperText Markup Language)是一种用于创建网页的标记语言,它描述了网页的结构和内容。CSS(Cascading Style Sheets)是一种用于控制网页样式和布局的样式表语言。通过将HTML和CSS结合使用,可以创建出丰富多彩的网页样式。 在初识CSS时,你可以了解以下几个方面: 1. CSS的基本语法:CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素,声明块中包含了一系列的样式属性和值。 2. 样式属性和值:CSS提供了丰富的样式属性和对应的取值,可以用来控制元素的外观、布局和动画效果。例如,可以使用"color"属性来设置文本颜色,使用"font-size"属性来设置字体大小。 3. 样式的应用方式:CSS样式可以通过三种方式应用到HTML元素上:内联样式、内部样式表和外部样式表。内联样式是直接写在HTML标签的"style"属性中,内部样式表是写在HTML文档头部的"style"标签中,而外部样式表是单独的CSS文件,通过链接到HTML文档中来应用样式。 4. CSS选择器选择器用于选择要应用样式的HTML元素。常见的选择器有标签选择器、类选择器、ID选择器、属性选择器等。通过选择器的组合和嵌套,可以更精确地选择元素并应用样式。 5. 盒模型:CSS中的盒模型描述了元素在页面中所占的空间。它由内容区、内边距、边框和外边距组成。通过设置盒模型的属性,可以控制元素的大小、边距和边框样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值