08_CSS3简单入门——样式表、选择器
之前咕咕咕了有点久,主要是日更累死了,一天要花一个多小时去写
所以后面的随笔发布时间应该是随心发,不定时,半个月来也是深入地学了JS,也差不多快学完了
估计CSS3讲完后就会去写JS(JavaScript)
这一次简单介绍下CSS3的三种样式表和各种选择器的使用
Part 1 样式表
关于html的样式表可以在下面链接中查看
https://www.cnblogs.com/yuange1433223/p/12847127.html
html5的样式表有:外部样式表、内部样式表、内联样式表
样式表是什么?这里可以简单理解成改变某标签的样式(宽、高、内外边距、字体、背景等)
Part2 选择器
CSS选择器有以下几种:
派生选择器:通过根据元素在其位置的上下文关系来定义样式
id选择器:可以为标有id的HTML元素指定特定的样式,id选择器以“#”来定义
目前比较常用的方式是id选择器,常常用于建立派生选择器
类选择器:类选择器以一个点显示,class也可以用作派生选择器
属性选择器:对带有指定属性的HTML元素设置样式
上面灌输的那些概念简单看下就行啦,详细代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3基础</title> 6 <link rel="stylesheet" type="text/css" href="01_css3基础.css"> 7 </head> 8 <body> 9 <!-- 自定义样式 --> 10 <yu1>自定义标签1</yu1><br> 11 <yu2>自定义标签2</yu2><br> 12 <yu3>自定义标签3</yu3><br> 13 <yu4>自定义标签4</yu4><br> 14 <p>这是一个p标签</p> 15 <!-- 派生选择器 --> 16 <p><strong>p标签:hello world</strong></p> 17 <ul> 18 <li><strong>li标签:hello world</strong></li> 19 </ul> 20 <!-- id选择器 --> 21 <div id="divid">div标签:id选择器divid</div> 22 <p id="pid">p标签:id选择器pid<a href="http://www.baidu.com">百度一下</a></p> 23 <!-- 类选择器 --> 24 <p class="pclass">p标签:类选择器pclass</p> 25 <div class="divclass">div标签:类选择器divclass<a href="http://www.bilibili.com">bilibili</a></div> 26 <!-- 属性选择器 --> 27 <p title="歪比巴卜">属性选择器(默认)</p> 28 <p title="shuxing">属性选择器(shuxing)</p> 29 </body> 30 </html>
1 body{ 2 color: black; 3 font-size: 50px; 4 } 5 6 p{ 7 color: chartreuse; 8 font-size: 25px; 9 } 10 11 yu1,yu2,yu3{ 12 color: aqua; 13 font-size: 37px; 14 } 15 16 #pid a{ 17 color: springgreen; 18 font-size: 30px; 19 } 20 21 #divid{ 22 color: forestgreen; 23 font-size: 30px; 24 } 25 26 .pclass{ 27 color: tomato; 28 font-size: 20px; 29 } 30 31 .divclass a{ 32 color: saddlebrown; 33 font-size: 20px; 34 } 35 36 li strong{ 37 color: darkgoldenrod; 38 font-size: 20px; 39 } 40 41 [title]{ 42 color: red; 43 font-size: 20px; 44 } 45 46 [title="shuxing"]{ 47 color: mediumslateblue; 48 font-size: 20px; 49 }
打开网页时的效果如下
上面引用的是外部样式表
关于自定义标签,在设置其样式表时,语法:标签名{......},如上面的自定义标签和p标签的设置
关于派生选择器,在设置其样式表时,语法:包含标签 被包含标签{......},包含标签和被包含标签用空格隔开,
如上面的html文件中的派生选择器那一块,18行中<li>标签是包含标签,<strong>标签是被包含标签
当然,这个包含关系还可以是3级、4级、5级......
关于id选择器,在设置其样式表前,首先要在html文件的你想要设置的标签里面添加id,标记下
然后再外部样式表(CSS文件)中用过“#”后接id名{......}即可修改其样式,详细见上面源码
关于类选择器,在设置其样式表前,首先要在html文件的你想要设置的标签里面添加class,标记下
然后再外部样式表(CSS文件)中用过“.”后接类名{......}即可修改其样式,详细见上面源码
关于属性选择器,这个在html5文件里面不要对齐标记id或者class,有属性即可
然后在CSS文件中,通过:[属性]{......}去修改样式,也可以是[属性=“属性名”]{......}去修改样式,详细见上面源码
出上面选择器之外,还有一种选择器,可以直接改变所有标签的style,但是优先级最低
书写格式:*{......}
*{ font-size: 40px; color:aqua}
如果你在设置一个标签的属性时,该标签里面同时含有id,class,同时也含有其他属性,
这时如果你同时在样式表中对其id和class以及其他属性进行设置时,这时不可能同时拥有上述三者的样式
而是取决于id选择器的设置,这个选择器之间的优先级,如:
<a href="00_zero.html" id="id1" class="class1">7th</a>
*{ font-size: 40px; color:aqua} .class1{font-size: 30px; color: blue} #id1{font-size: 25px; color: blueviolet} [href]{font-size: 20px; color: brown}
效果如下:
颜色是blueviolet,字体大小是25px
还有一点要注意的,类选择器和id选择器的区别:
类:比如我们人类,分中国人,美国人,英国人等,相当于分类
我们说中国人,信仰的是马克思,这里我们可以理解成我们将“中国人”这个类,添加了信仰这一样式的设置
这个类呢,指的是全体中国人,所以类可以被多人(标签)使用
而id,比如我们的身份证,每个人都有属于自己的身份证,所以,一个id只能一人(标签)使用
这个就是id和类的区别,如果你在编写时,多个标签添加同个id时,编辑器可能会报错
总结
上面选择器的用法也是大概简单的讲了一遍,用起来也是没啥难度,我记得之前学的时候相关知识点貌似不只这些
不过最基本的应该就上面那些,我记得标签之间是否隔代书写也会不同的,所以后面想到的话再简单补充下
最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)
没用就当看着玩啦[狗头]