前言：
div
css
两个html标签
1 div:块标签
<div></div> 标签内部的内容会换行 默认自己独占
2 span:行内的块标签
<span><span> 标签内部的内容不会换行
一 css
css 层叠样式表
作用:
渲染页面
提高工作效率
css 的格式：
选择器{属性:值;属性1:值1;}
css 的使用：
方式1：内联样式表
通过标签的style属性设置样式例如style = "font-size：6"(不建议 不利于以后改写)
方式2:内部样式表 在当前页面中使用的样式通过head标签的style子标签导入
通过#+id找到
例如:
<style>
#id01{
background-color: #0f0;
}
</style>
方式3:外部样式表 有独立的css文件
通过head标签的link子标签导入
例如:
<link rel="stylesheet" href="css/1.css" type="text/css"/>
CodeDemo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#id01{
color: #ccc000;
}
</style>
<link rel="stylesheet" href="../css/1.css" type="text/css" />
</head>
<body>
<!--
css 语法 选择器{属性:值;属性1:值1;}
内联样式表 方式 （和语法的格式有点不同，但是这种方式不建议使用 ，不利于改写）
-->
<div style="font-size: 3cm;">你好</div>
<!--
内部样式表 方式
内部样式表 在当前页面中使用的样式通过head标签的style子标签导入
-->
<div id="id01">你好</div>
<!--
外部样式表 方式
外部样式表 有独立的css文件通过head标签的link子标签导入
-->
<div id="id02">你好</div>
</body>
</html>
外部样式表的css code： 1.css
#id02{
color: red;
}
注： 以上方式2， 方式3， 使用了id 选择器 以下会讲解
二 css 的选择器
1 id选择器
要求:
html元素必须有id属性且有值 <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值 #id1{...}
2 class选择器
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}
和id选择器的区别一个通过. 引入 一个通过#
3 元素选择器
直接用元素(标签)名即可 xxx{...}
注 ：使用此标签的元素都会被设置
4 属性选择器★(元素选择器派生的)
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
属性选择器操作在元素选择器的基础上
5 后代选择器（针对嵌套标签 类似元素选择器）
语法：
选择器 空格 后代选择器{...} 在满足第一个选择器的条件下找后代的选择器
个人理解：
标签1 标签2（嵌套在1中的）{....}
6 锚伪类选择器（了解 用的不多 但是常见）
了解的选择器
锚伪类选择器
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
四个顺序不能乱 否则有的效果出不来 使用的时候直接粘贴拿来用就行。
code Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#id01{
color: #CCC000;
}
</style>
<style>
.class01{
color: #FF0000;
}
</style>
<style>
span{
color: green;
}
</style>
<!--
属性选择器的使用
-->
<style>
span[attr = "aaa"]{
color: blue;
}
</style>
<style>
p font{
color: #0000FF;
}
</style>
<style>
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<!--
id选择器 元素含有id且id有值就行 css中通过#id的值引入
-->
<div id="id01">啊哈哈</div>
<!--
class选择器 元素含有class且class有值就行 css中通过.的值引入
-->
<div class="class01">啊哈哈</div>
<!--
元素选择器 使用了此元素标签都会被设置
-->
<span>Tom</span>
<span>kate</span>
<span attr = "aaa">john</span>
<!--
属性选择器 针对元素选择器的基础上 如上文的第三个 span 自定义了个attr属性 以及值
-->
<!--
后代选择器
-->
<p>
<font> p下的font</font>
</p>
<!--
锚伪类选择器
-->
<a href="http://www.baidu.com"> 移上来试试</a>
</body>
</html>
选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类元素 值为class 的值就可以
元素选择器:一种元素
属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)
若多个样式作用于一个元素的时候
不同的样式,会叠加
相同的样式,最近原则
若多个选择器作用于一个元素的时候
越特殊优先级越高 id优先级最高
三 属性（选择器会使用了了解下属性及其值）
字体
font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
文本:改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline
text-align:对齐文本
列表:
list-style-type:设置列表项的类型 例如:a 1 实心圆
list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url("/i/arrow.gif");
背景:
background-color:设置背景颜色
background-image:设置图片作为背景 url
尺寸:
width:
height:
浮动:
float: 可选值 left right
分类:
clear:设置元素的两边是否有其他的浮动元素
值为:both 两边都不允许有浮动元素
display:设置是否及如何显示元素。
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符
四 框模型:(理解)
一个元素外面有padding(内边距) border(边框) margin(外边距)
padding:元素和边框的距离
margin:元素最外层的空白
上面这三个属性都有简写的属性
若设置大小的时候 四个值:顺序 上右下左
padding:10px 10px 10px 10px
若只写一个的话 代表四个边使用同一个值 padding:10px
若只写两个个的话 代表四个边使用同一个值 padding:10px 20px
若只写三个个的话 代表四个边使用同一个值 padding:10px 20px 30px
border(边框)
还可以设置颜色 风格
简写属性:
border:宽度 风格 颜色;
border:5px solid red;
solid:实线
dashed:虚线
double:双实线
网友评论