CSS选择器
作用:选择对应的元素
语法:选择器名后跟{},{}里面写对应的样式名与样式值.{样式名:样式值;样式名:样式值;...}1、元素选择器——会选择html文档里素有与选择器名相同的元素
div{ background-color: orange; } p{ color: red; } body{ background-color: blue; }
2、群组选择器——会获取到每个逗号之间与之名字相同的所有的元素
h1,h2,p,div { color :yellow; }
3、id选择器——会获取到设置了对应id值得元素
前提:需要事先给对应的元素设置id值
注意:同一页面中id值不能重复!!!!
id名的命名规则,只能由字母,数字,下划线组成,并且数字不能开头小驼峰命名法:多个单词除了第一个单词其余所有单词首字母大写(常用)
大驼峰命名法:所有单词首字母大写(不常用)
另有“匈牙利命名法”和“帕斯卡命名法”,但很少用到,可自行百度了解
#p3 { background-color: red; }
4、class(类)选择器——获取到设置了对应class值得所有元素
前提:需要给对应的元素设置class值
注意:class值可以重复!!!!!.textCenter{ text-align: center; }
5、后代选择器
语法:
E F {
background-color:red;
}
找到E对应的元素里所有的与F对应的元素(E、F可以是元素选择器名,id选择器名,class选择器名)#div3 p span { font-size: 30px; }
6、子选择器
扫描二维码关注公众号,回复: 4885862 查看本文章语法:
E>F{
color:red;
}
找到E对应的元素里所有的且与E元素呈父子关系的元素(E、F可以是元素选择器名,id选择器名,class选择器名)#div3>p { background-color: orange; }
优先级:*<标签选择器 <class选择器 <id选择器 <行间样式<!important
CSS样式
CSS:Cascading Style Sheets 层叠样式表
作用:决定如何显示html元素
css是html4之后出现的,版本一共有三个1.0 2.0 3.0
W3C编码理念:结构(html),样式(css),行为(js)三者相分离
如何书写css?
1.行间书写css: 在想要设置css样式的元素的内部用style属性书写css样式
2.内联式书写css: 在当前文档的head标签里用style标签书写css样式
3.外联式书写css: 单独创建一个css文件书写css样式
三种样式引入方式
1.行间样式的引入
写法:在标签中,写一个style的属性 比如:style="...."在引号当中,写对应的css样式
缺点:不利于维护,不利于代码重用,违背了W3C的编程理念
优点:优先级最高,针对性极强<p style="background-color:red;">这是一个红色背景色段落</p>
2.内部样式的引入
写法:在head标签里,写一个style标签,在标签中,通过选择器来控制样式优点:加载速度块,不需要去请求服务器
缺点:不利于代码重复利用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联式css样式</title> <style type="text/css"> div{ background-color: cyan; height:300px; width:400px; font-size: 20px; color:red; line-height: 300px; text-align:center; } </style> </head> <body> <div>这是一个div元素</div> <div><img src="5.jpg" alt=""></div> </body> </html>
3.外部样式表的引入
写法:在head标签里,写一个link标签,用来关联一个css文件,在css文件中,通过选择器来控制样式link标签:<link rel="stylesheet" herf="css文件的路径">
优点:利于代码重复利用
缺点:需要加载服务器引入外部css样式文件
方法1:link标签引入(推荐)
方法2:@import引入link和@import引入的区别:
1.link是html语法,import是css语法
2.link是在html文档加载的开始加载css文件的,而import是在html文档加载结束之后才开始加载css文件的
3.link可以引入任意类型的文件,import只能引入css文件
4.使用link方式引入的css代码在后期我们使用js进行修改,但是import方式引入的css代码以后无法修改@import引入——需要将引入的代码写在style标签里
<style type="text/css"> @import url(style.css); </style>
link标签引入——把标签写在head标签里
<link rel="stylesheet" href="style.css">
CSS3中新增了很多新的样式,后期我们会在做介绍