初识CSS
2019-03-11 本文已影响24人
暖A暖
一、什么是CSS
-
CSS全称为层叠样式表(Cascading Style Sheets)，通常又称为风格样式表(Style Sheets)，它是用来进行网页设计的；
-
在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式；
二、CSS的优势
-
内容与表现分离，也就是使用前面学习得HTML语言制作网页，使用CSS设置网页样式、风格、并且CSS样式单独存放在一个文件中，这样只要HTML文件引用CSS文件就可以了，便于后期的CSS样式的维护；
-
表现的统一，可以使网页的表现非常同意，并且容易修改；
-
丰富的样式，使得页面布局灵活；
-
减少网页的代码量，增加网页的浏览速度；
-
运用独立页面的CSS，有利于网页被搜索引擎收录；
三、CSS的基本语法结构
- CSS和HTML一样都是浏览器能解析的计算机语言，因此CSS也有自己的语法结构；
- CSS规则由两部分构成，选择器和声明，声明必须放在大括号中{}，可以是一条或多条；
- 每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文的分好结尾；
# h1表示选择器
# font-size和color表示属性
# 12px和#fff表示属性值
p{
font-size:12px;
color:#fff;
}
四、<style>标签
- 在HTML中通过使用<style>标签引入CSS样式，<style>标签用于为HTML文档定义样式信息；
- <style>标签位于<head>标签中，它规定浏览器中如何呈现HTML文档；
- 在<style>标签中，type是必须属性，用于定义style元素的内容，值为“text/css”；
<style type="text/css">
p{
font-size:12px;
color:#fff;
}
</style>
<body>
</body>
五、CSS选择器
- 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素；
- 所有HTML语言中的标签样式都是通过不同的CSS选择器进行控制的；
- CSS的选择器分为三种，分别是：标签选择器、类选择器、ID选择器；
标签选择器：
- 一个HTML页面由很多的标签组成，例如
<html>、<p>、<h1>、<div>、<span>等，CSS标签选择器就是用来声明这些标签的； - 每种HTML标签的名称都可以作为相应的标签选择器的名称，例如
<p>标签和<h1>标签，如果我们需要在它们上面定义一个标签选择器，那我们要怎么做呢；
p{
font-size:12px;
}
h1{
font-size:16px;
}
- 需要注意的是，一个HTML页面会有很多的
<p>标签和<h1>标签，标签选择器一旦声明，那么页面的所有该标签都会应用，这样虽然用起来很方便，但是如果想要给其中一个标签单独定义属性则不能，此时需要使用类选择器或者ID选择器了；
类选择器：
- 类选择器的名字可以由用户自定义，属性和值跟标签选择器一样，必须符合CSS规范，它的语法如下；
# .class1为类选择器的名字
# font-size为属性
# 12px为属性值
.class1{
font-size:12px;
}
- 和标签选择器不同的是，设置了类选择器之后就要在HTML的标签中应用相应类样式，使用标签的class属性引用类样式，如下所示；
<style>
.class1{
font-size:18px;
color:#f00;
}
</style>
<body>
<p class="class1">hello world！</p>
<p>hello world!</p>
</body>
-
如下图所示，上面一行p标签是应用了类样式class1，下面一行则没有，所以上面一行样式有变化，下面一行没有变化；
4.png
ID选择器：
- ID选择器的使用方法和类选择器相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强；
- 比如说有一个类选择器.class1，那么它可以在页面的多个标签中应用，有一个ID选择器class1，那么它只能在页面 中用一次；
<style>
.class1{
font-size:18px;
color:#f00;
}
#id1{
font-size:26px;
color:#0A00F3;
}
</style>
<body>
<p class="class1">这是第一行哟</p>
<p class="class1">这是第二行哟</p>
<p class="class1">这是第三行哟</p>
<p id="id1">这是第二行哟</p>
<p >这是第二行哟</p>
</body>
-
效果图
5.png
六、CSS样式引入方法
- 在HTML页面中，引入CSS样式有三个方法，分别是：行内样式、内部样式和外部样式；
行内样式：
- 行内样式就是在HTML中直接使用style属性设置CSS样式，用法为：<标签名 style="样式声明;"></标签名>；
- 这种方法仅对当前的HTML标签起作用，并且是写在HTML标签中的，因此这种方法不能使得内容和表现相分离，没有体现出CSS的优势；
内部样式：
- 把CSS代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中，这就是内部样式表；
- 这种方法的优势为方便在同页面中修改样式，但是不利于在多页面间共享复用代码和维护代码，对内容与样式的分离也不够彻底；
外部样式：
- 实际开发中我们都是使用这种方式来引入CSS样式，它是把CSS代码另存为一个单独的CSS文件，文件的扩展名为.css，然后在页面中引入这个文件；
- 引入外部样式的语法为：<link rel="stylesheet" type="text/css" href="css文件路径">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="style.css" /> # 引入外部css文件style.css,所有的样式都写在这个文件中
</head>
<body>
<p class="class1">这是第一行哟</p>
<p class="class1">这是第二行哟</p>
<p class="class1">这是第三行哟</p>
<p id="id1">这是第二行哟</p>
<p >这是第二行哟</p>
</body>
</html>
七、样式优先级
- css的全称为层叠样式表，顾名思义，css中的样式可以叠加使用，页面的最终效果为多个样式叠加效果；
- 样式的叠加会造成样式之间的冲突，所以就存在优先级的问题；
- 选择器的优先级为：标签选择器>ID选择器>类选择器；
- 样式优先级：行内样式>内部样式>外部样式；
八、CSS复合选择器
- 由标签选择器、类选择器、ID选择器三种基本的选择器为基础，通过不同方式将两个或者多个选择器组合在一起而形成的选择器叫做复合选择器；
后代选择器：
- 后代选择器（descendant selector）又称为包含选择器，后代选择器可以选择作为某元素后代的元素；
- 它的语法为：
<style>
p strong{
font-size:24px;
}
</style>
<body>
<p>春眠不觉晓，<strong>处处</strong>闻啼鸟</p>
</body>
交集选择器：
- 交集选择器由两个选择器直接连接构成，其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器，这两个选择器之间不能有空格；
- 它的语法为：
<style>
p.special{
color:red;
}
</style>
<body>
<p class="special">春眠不觉晓，处处闻啼鸟</p>
</body>
并集选择器：
- 并集选择器简称集体声明，并集选择器是多个选择器通过逗号连接而成的；
- 并集选择器可以用来定义风格完全相同，或者部分相同的选择器；
- 语法为：
<style>
h1,h2,h3,h4,h5{
color:red;
}
</style>
<body>
<h1>第一个</h1>
<h2>第二个</h2>
<h3>第三个</h3>
<h4>第四个</h4>
<h5>第五个</h5>
</body>
九、继承特性
- CSS的继承简单的说就是将各个HTML标记看做一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式；
- 所有的CSS语句都是基于各个标记直接的继承关系，CSS继承是指子标记会继承父标记的所有样式风格，并可以再父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式完全不会影响父标记；
