1.引入css
(1)内嵌式引入
把style标签嵌套在head标签中
看一下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"></style>
</head>
<body>
title下面一行的代码的意思就是引入css，因为是嵌在head所以叫内嵌式引入
(2)外链样式
外链式不直接和html写在同一个文件中，而是把css写在另外一个文件，通过link标签引入到html中。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
</body>
</html>
href="",引号中填写css的路径，容易引入错，要注意。
第二个文件就是css文件，我们写css都在第二个文件中写，用这种方式引入的好处是，当你需要就可以调用就不用在写一遍了。以下内容我就用外链式引入css。
2.常用的选择器
.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如果要定义不止一个声明，则需要用分号将每个声明分开。
(1)派生选择器。
具体到某个标签。先看html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/zongjie.css">
</head>
<body>
<p><strong>你好，世界</strong></p>
<ol>
<li><strong>你好，世界</strong></li>
<li>你好，世界</li>
</ol>
</body>
</html>
我们再看一下css的代码：
li strong {
font-size:60px;
font-weight: normal;
}
在看一下效果图：
我们可以看到css中我们把li标签中的strong标签的字体大小设置成了60px。(font-size:60px;)字体的粗细为正常（font-weigh：normal；）。
所以在浏览器中我们可以看到只有li标签中的strong标签的"你好，世界"的字体很大。这样就无需 strong 元素定义特别的 class 或 id，代码更加简洁
(2)id选择器
我们先看代码，然后在解释它的用法。
先看html代码：
<p id="red">你好，世界</p>
<p id="green">你好，世界</p>
css代码：
#red {color:red;}
#green {color:green;}
效果图如下：
css中的格式就是,#+名称
在html中就是在你需要改变的标签中加入id=""并且在引号中填写#后面的名称.
比如说，这里css中的#red{color:red;}和html中的
你好，世界
意思就是p标签的样式要改成red大括号里面那样，即p标签的字体要变成红色。（color：red；是控制字体颜色）
(3)类选择器
先看代码，在解释其用法。先看html的代码：
<p class="center">
你好，世界.
</p>
css代码：
.center {text-align: center}
效果图：
类选择器：css格式：. + 名称
html格式：在标签中加入 class="",引号中填名称。
比如这里的css中的.center {text-align: center}，html中的
你好，世界。
(4)全选择器
先看代码，在解释其用法。
css代码:
*{font-size:30px;}
效果图：
因为全选择器就是对所有标签都起作用，所以之前我们写的所有标签内容“你好，世界”都按照*{}要求把字体大小改成了30px；所以我们明显看到所有的“你好，世界”的字体大小都是一样的（除了第二个）。为什么第二个没有改变你呢？这就涉及到了css的层叠特点。稍后再详细解释。
3.在css中控制html中的字体
(1)大小：
font-size：；以上我们用过，就不再看代码和效果图了，注意写单位。
(2)颜色：
color：；以上我们用过，就不再看代码和效果图了。
(3)字体
font-family：；
html代码：
<p id="wenben">你好，世界。</p>
css代码：
#wenben{font-family:楷体;}
效果图：
这里我们用的是id选择器。我们可以看到最后一个“你好，世界”的字体是楷体。
(4)行高：
line-height:;
我们就在上一个的css代码进行改动，html内容不变。改了之后的css代码：
#wenben{font-family:楷体;line-height:200px;}
效果图：
相比于上一张效果图，这张效果图的最后一个“你好，世界”明显与上一排的“你好，世界”隔开了很多距离。这就是控制行高的作用。单位除了px也可以是%，或者是em。
(5)粗细：
设置字体的粗细 font-weight：normal[正常]bold[粗体]
我们继续在上一个css代码改动，html代码不变。
改动之后的css代码：
#wenben{font-family:楷体;line-height:200px; font-weight:bold;}
效果图：
我们明显可以看到最后一个“你好，世界”被加粗了。
4.在css中控制html中的文本
(1)文本缩进：
text-indent:;
我们继续在上一个css代码进行改动，html代码不变。
改动后的css代码：
#wenben{font-family:楷体;line-height:200px; font-weight:bold;text-indent:2em;}
效果图：
我们明显可以看到，相比于上一张的效果图，最后一个“你好，世界”前面空了两格，这种方式经常用在文中段落开头空两格。
(2)对齐方式：
文本水平对齐方式 text-align：left[左]center[中]right[右]；
以上示范过text-align：center；的用法就不上代码了。
5.css的特点
(1)继承
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
(2)层叠
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式，后面定义的样式，会覆盖前面定义的样式。
所以刚刚我们在用全选择器的时候为什么单单第二个“你好，世界”的字体大小没有发生变化，就是因为在第二个世界的css代码中规定了字体大小为60px，所以全选择器就对它不起作用了。
6.盒子模型
我们在布局的时候常常用盒子模型。
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border：1px solid black
像素值 实线 颜色
先看html代码：
<div id="one">我是一个盒子</div>
css代码：
#one{
width:100px;
height:100px;
border:3px solid pink;
}
效果图：
注意：在css中要规定和的宽度和高度，否则在浏览器中不能显示出来。
如果我们改变盒子距离浏览器的位置，我们可以用margin-left：；
margin-right:;magin-top:;magin-bottom:;可以分别控制盒子距离浏览器左边，右边，上边，底部的距离。相应的，padding-left:;padding-right:;padding-top:;padding-bottom可以控制盒子中文本距离盒子的距离。
在上面的基础上改动一下css代码，html的内容不变：
#one{
width:100px;
height:100px;
border:3px solid pink;
margin-left:100px;
padding-left:20px;
}
效果图：
7.块状元素和内联元素
(1)块状元素：
具有高度和宽度的属性，但是它不允许其他元素和它同行显示，代表标签 div p 等等
(2)内联元素：
内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示，代表标签 a span
8.控制背景
(1)背景颜色：
background-color：#ccc；
在以上的代码基础上改变css的代码，html的代码不改变。
css代码：
#one{
width:100px;
height:100px;
border:3px solid pink;
margin-left:100px;
padding-left:20px;
background-color:#ccc;
}
效果图：
可以看到我们盒子的背景颜色就改变了。
(2)背景图像
background-image：url（背景图像的位置及全称）；
一般不用，因为背景不用图片设置。
(3)背景图像的重复方式
background-repeat:[repeat、no-repeat、repeat-x、repeat-y]；
意思分别是，重复，不重复，在x轴重复，在y轴上重复。
9.布局
浮动布局 float 属性。什么是浮动？
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none：不浮动
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
我们先看一下没有浮动之前的代码。
html代码：
<div id="two">我是第二个盒子</div>
css代码：
#two{
width:100px;
height:100px;
border:3px solid pink;
margin-left:100px;
padding-left:20px;
background-color:#ccc;
}
效果图：
因为盒子是不能够同行显示的，所以我们想要两个盒子同行显示就需要浮动。
html代码不变，css代码加浮动。
css代码：
#one{
float:left;
width:100px;
height:100px;
border:3px solid pink;
margin-left:100px;
padding-left:20px;
background-color:#ccc;
}
#two{
float:left;
width:100px;
height:100px;
border:3px solid pink;
margin-left:100px;
padding-left:20px;
background-color:#ccc;
}
效果图：
我们可以看到第二个盒子就在第一个盒子的右边了。
10.导航
(1)水平：
我借助wsc中的实例来看看怎么做导航。
html代码：
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
css代码：
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
效果图：
先解释html代码：导航栏基本上是一个链接列表，因此使用 ul 标签
和 li 元素是非常合适的，所以html中就用< ul >和< li >
css代码:
-
list-style-type:none;是去掉列表的圆点。
-
li{display:inline;}去除了每个列表项前后的换行，以便让它们在一行中显示。你们可以看看如果不加这个是什么样的效果，这样就可以就更清楚的知道这个的作用。
3.伪类：a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接
(2)垂直
如果需要垂直导航不用加 li{display:inline;}，注意调节好宽度，距离等问题。
以上就是我总结的css的知识点了。
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
