基础CSS笔记（一）_"<pre name=\"code\" class=\"html\"><span style=\"w-程序员宅基地

一

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

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

本文链接：https://blog.csdn.net/qq_20141243/article/details/51054458

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

html5科技感logo,这些LOGO设计得太巧妙了！-程序员宅基地

文章浏览阅读1.6k次。这些创意满满的 LOGO你见过吗？文章转载自：设计ID：sheji0123编辑：darlene7哈喽大家好，我是设计君！有时候灵感源自于生活看下面这组LOGO就知道了1、简化的鸽子2、简化的犀牛3、简化的马4、还是简化的马，一个元素可以有多种的风格5、简化的鸡6、字母S与鲨鱼的结合7、狗狗与十字的结合，一看就知道是宠物医院类的8、蜜蜂与花的结合9、长颈鹿的脚是酒瓶10、2本书结合成一个爱心11、鱼..._科技感logo设计

Qt实战案例（40）——利用QSharedMemory类实现进程间通信的功能_qsharedmemory 类封装-程序员宅基地

文章浏览阅读1.4k次，点赞2次，收藏12次。目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件五、效果演示一、项目介绍利用QSharedMemory类实现进程间通信，使用共享内存，它实现的功能是：先将一张图片写入到共享内存段中，然后再从共享内存段读出该图片。二、项目基本配置新建一个Qt案例，项目名称为“IPCTest”，基类选择“QWidget”，点击选中创建UI界面复选框，完成项目创建。三、UI界面设计UI界面布局如下：界面中创建了3个控件，其名称和类型如下_qsharedmemory 类封装

MAC终端下常用Git命令-程序员宅基地

文章浏览阅读89次。送给新手的简单命令操作、远程Git和local的同步实现流程：1、把git上的代码clone到本地$ git clone http:xxxx(地址，可以http也可以ssh)2、clone到本地以后、使用branch -a 查看远程所有分支$ git branch -a3、如若你有...

截断和否定上机操作-程序员宅基地

文章浏览阅读103次。转载自：https://mp.weixin.qq.com/s/ETG_9fiElwWtQYb-JUf6yA?- [user].|: p(X):- a(X).|: p(X):- b(X), c(X), d(X), e(X).|: p(X):- f(X).|: a(1).|: b(1).|: b(2).|: c(1).|: c(2).|: d(2).|: e(2).|: f(3).|: ^D% user://1 compiled 0.00 sec, 11 cl

HDU - 3746 Cyclic Nacklace （最小循环节KPM）-程序员宅基地

文章浏览阅读678次。CC always becomes very depressed at the end of this month, he has checked his credit card yesterday, without any surprise, there are only 99.9 yuan left. he is too distressed and thinking about how to

C# 操作Excel文件之NPOI (二)-程序员宅基地

文章浏览阅读250次。此方式会通过3篇文章将关于Excel的一些日常操作给实现出来，分别为：读取、写入、格式设置等；让其可以满足我们的日常工作需求。本篇要记录的是使用NPOI创建Excel文件并将数据写入。实现...