您的位置：首页 > Web前端 > CSS

基础CSS笔记（一）

2016-04-04 00:52 776 查看

一

每种浏览器都有其默认的页面格式，但是各个浏览器之前的默认格式差异不大。我们在学习CSS的时候需要知道有默认格式的存在，以便于再以后编辑CSS时有效的利用或者克服不同浏览器之前的默认格式，使自己设计的网站能兼容更多的浏览器

比如：

<body style="color:red;">
<a href="#">我是什么颜色</a>
</body>

上面的例子：运行出来其实是蓝色，但body里面设置的是红色啊，这就是浏览器的默认格式在作怪，如何解决？我们只需要重写这个默认格式就可以了

<body style="color:red;">
<a href="#" style="color:red;">我是什么颜色</a>
</body>


二
CSS 中有三类选择器：

ID选择器，类选择器，标签选择器

                          css中的格式                         对应html中的属性

ID选择器：  #selector{declaration}                  id="selector"

类选择器：  .selector{declaration}                   class="selector"

标签选择器  如：li{declaration}                          <li></li>

其中  相同名字的ID选择器在一个页面应该是唯一的，虽然也可以多次使用，但ID一般都是唯一的，因为在JavaScript中还需要id来传参数什么的，如果ID不唯一，参数不能传

而类选择器则可以使用多次

三
在html中添加css的三种方式：

1、Inline styling  行内方式     

<div  style="position:absolute; top:0; left:0; width:100%;"></div>


2、embedded styling  嵌套方式        

<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html"><head>
......
<style>
p{
font-size:20px;
}/*作用于所有的p标签，标签选择器*/
.header{
color:green;
}/*属于类选择器*/
</style>
</head>
<body>
<h1 class="header">welcome to my blog!!!</h1>/*引用上面的类选择器*/
</body>






需要注意的是：<style>属性标签需要放在<head></head>里面，在后面我会把html中关于这方面的知识点补上

3、External style sheets  额外的css样式文件

<head>
<span style="white-space:pre">	</span><link rel="stylesheet" type="text/css" href="css/syntax.css"> /*通过这句话引入css文件，同样是要写在head标签里面*/
</head>

四
CSS中可以加入注释：

格式就是

/*注释的内容*/

在css文件中加入注释，可以让开发者一段时间在返回来修改看自己的代码时效率更高，

使用注释可以很好的把css里面的各个部分分管的样式分隔开，不仅有利用开发者的后期开发和修改，在一个团队里面，也有助于其他队友（开发者）更容易理解自己所写的代码。

五
冲突与级联：

冲突：

当一个html中，同一个标签有多个css样式进行限制时，行内样式的优先级>嵌套样式>css文件中下方的标签的样式>css文件中上面出现的标签样式

级联：

级联使浏览器更加明确自己要利用css设置哪些标签

直接看例子，如下：

代码中可以发现所有的css样式都是关于标签<h1>的，当我们运行如下代码的时候，最终两个<h1>标签中的文字是什么颜色呢？

答案是：Selector是黄色，In css是粉色。

原因就在于CSS中的冲突与级联：

当运行html时，首先他会看到<link> 随后找到CSS文件，在CSS文件中他首先看到了h1{..red}于是浏览器知道h1要设置成红色，可随后他又看到了另一个h1{..green}所以就又知道要改成绿色，加载完css文件之后，他看到了<style>标签，又一次明白要改成粉色，最后在body中他看到了<h1>就会设置里面的内容为粉色字体，但在<h1 style="color:yellow;">有行内样式style，因此当浏览器看到他就会将这个标签包括的字变成黄色。

CSS中，看到p{......}，会设置body中的所有p标签字体为30px，随后看到了 #header  p{.....}，明确指出要设置header下的p标签，优先级更高，所以div id="header"里面的p标签会是20px。 这就是级联。

 html文件：

<pre name="code" class="html"><!doctype html>
<html>
<head>
<title>CSS for Beginner</title>
<link rel="stylesheet" type="text/css" href="css/syntax.css">
<span style="white-space:pre">	</span><style>
<span style="white-space:pre">	</span> h1{
<span style="white-space:pre">			</span>color:pink;
<span style="white-space:pre">	</span>  }
<span style="white-space:pre">	</span></style>
</head>
<body>
<div id="header">
<h1 style="color:yellow;">Selector</h1>
<h1>In css</h1>
<p>Welcome to my blog!</p>
</div>

<p>Hello there ninjas!</p>
</body>
</html>



CSS文件：

<pre name="code" class="html">h1{
color: red;
}

h1{
font-size: 32px;
color: green;
}
p{
font-size:30px;
}
#header p{
font-size:20px;
}






六选择器的使用：
假设给各个选择器打一个分数：
ID's       100分
Classes  10分
Elements 1分

index.html
<!doctype html>
<html>
<head>
<title>CSS for Beginner</title>
<link rel="stylesheet" type="text/css" href="css/syntax.css">
</head>
<body>
<div id="header">
<h1>Selector</h1>
<h1 class="test">In css</h1>
<h1>Welcome to <strong>my</strong> blog!</h1>
</div>

<h1>Hello there ninjas!</h1>
</body>
</html>


syntax.css：
<pre name="code" class="html">h1{
color: red;
}
#header h1{
color: green;
}
.test{
color:yellow;
}
strong{
color:blue;
}



在CSS中：
元素选择器（element）h1有1分，级联选择器（ID+元素）#header h1有101分，而类选择器.test有10分，所以在运行html时，<h1>Selector</h1>和<h1 class="test">In css</h1>都是绿色，因为分值高，而<h1>Hello there ninjas!</h1>应该是红<h1>Welcome to <strong>my</strong> blog!</h1>里面的my是蓝色，因为.test，#header  h1 等都是关于<h1>标签，对其他标签并不影响。

给大家推荐一个外国网站，上面有前端开发要学的基础知识（html,css,javascript,jquery等），讲的浅显易懂，虽然是外国网站，但在youtube上看有自动翻译功能，所以还好哦。链接如下： http://thenetninja.co.uk/Subjects 
如果笔记中有什么问题或者大家有什么疑问请在下面评论，共同学习，共同进步~~~~
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航