码迷,mamicode.com
首页 > Web开发 > 详细

css基础

时间:2017-09-20 12:03:59      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:red   改变   前端优化   lang   head   如何   sheet   条件   body   

css绝对是一个能够写到爆炸的东西,so,机智的小北方才不会写各种css样式具体的效果,相比之下更推荐大家记一些常用的key,至于效果,每次用的时候百度下就可以了,

css的作用是对符合条件的标签进行渲染,那么首先就要匹配到对应标签啦,我萌有三种基础的模式来匹配希望改变样式的标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 {
 8             color: red;
 9         }
10 
11         .class1 {
12             color: blue;
13         }
14 
15         div {
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="id1">id选择器</div>
22     <div class="class1">class类选择器</div>
23     <div>标签选择器</div>
24 </body>
25 </html>

技术分享

 

显而易见这三种选择器会对符合条件的标签进行对应渲染,在日常使用中我们最多使用的是类选择器,因为在一个页面中一个id只能对应一个标签,而类选择器则可以赋予多个标签,所以id选择器最具有针对性,它的优先级也是最高的,而类选择器则比标签选择器高

Id > class > 标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 {
 8             color: red;
 9         }
10 
11         .class1 {
12             color: blue;
13         }
14 
15         div {
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="id1" class="class1">id选择器</div>
22     <div class="class1">class类选择器</div>
23     <div class="class1">标签选择器</div>
24 </body>
25 </html>

技术分享

好啦,我萌知道了怎么给对应的标签加特效了,duang,但是在有多层级的时候怎么办呢,我又不能给每个标签加上id或者class,因为有很多都是没有必要的,so,此时我萌就要用到层级选择器啦

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             color: red;
 9         }
10 
11         div > div {
12             color: blue;
13         }
14 
15         div > div > div{
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div>
22         <div>
23             <div>3层</div>
24         </div>
25 
26         <div>2层</div>
27     </div>
28 
29     <div>1层</div>
30 </body>
31 </html>

技术分享

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 ~ div {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div id="id1"></div>
14     <div>1层</div>
15 </body>
16 </html>

技术分享

 

层级的选择主要使用的就是>,代表去子元素中继续匹配,所以我们可以在首层使用一个id,这样就可以立刻锁定一个标签块的范围然后继续去匹配了

最后还有一个问题,那就是如何使用css呢,我们有三种方法

  1. 在标签的属性内增加style属性,然后进行编辑,这种方式的优先级最高
  2. 在head内增加<style>标签然后编辑对应需要匹配标签的效果,这种方式的优先级中等
  3. 第三种使用<link>标签外联uri引入css,css文件内容与第二种一样只是不需要<style>标签了,这种方式的优先级最低,但是确实我们最常使用的

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="main.css">
 7     <style>
 8         div {
 9             color: blue;
10         }
11     </style>
12 </head>
13 <body>
14     <div style="color: red">66666666666666</div>
15 </body>
16 </html>
1 div {
2     color: green;
3 }

技术分享

 

为什么我萌最常使用第三种呢?这个在最后的前端优化里会介绍~

css基础

标签:red   改变   前端优化   lang   head   如何   sheet   条件   body   

原文地址:http://www.cnblogs.com/bfmq/p/7560239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!