08_CSS简单入门——样式表、选择器

之前咕咕咕了有点久,主要是日更累死了,一天要花一个多小时去写

所以后面的随笔发布时间应该是随心发,不定时,半个月来也是深入地学了JS,也差不多快学完了

估计CSS3讲完后就会去写JS(JavaScript)

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、[href]的优先级是 #id > .class > [href]

如果你在设置一个标签的属性时,该标签里面同时含有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时,编辑器可能会报错

总结

上面选择器的用法也是大概简单的讲了一遍,用起来也是没啥难度,我记得之前学的时候相关知识点貌似不只这些

不过最基本的应该就上面那些,我记得标签之间是否隔代书写也会不同的,所以后面想到的话再简单补充下

最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)

没用就当看着玩啦[狗头]

猜你喜欢

转载自www.cnblogs.com/yuange1433223/p/12962092.html