CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20141243/article/details/51054458

一

每种浏览器都有其默认的页面格式，但是各个浏览器之前的默认格式差异不大。我们在学习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

如果笔记中有什么问题或者大家有什么疑问请在下面评论，共同学习，共同进步~~~~