1.css理解
作用:
- 渲染页面
- 提高工作效率
2.div标签
<div></div> <!--占据一行-->
span:行内的块标签
<span><span><!--不换行-->
3.css和html元素的整合
方式1:内联样式表 通过标签的style属性设置样式
方式2:内部样式表 在当前页面中使用的样式
通过head标签的style子标签导入
例如:
<style>
#divId2{
background-color: #0f0;
}
</style>
- 方式3:外部样式表 有独立的css文件,通过head标签的link子标签导入
例如:
<link rel="stylesheet" href="css/1.css" type="text/css"/>
案列代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式表-->
<style>
#divId2{
background-color:#0f0;
}
</style>
<!--外部样式表需要导入-->
<link rel="stylesheet" href="../css/1.css" type="text/css"/>
</head>
<body>
<div>哈哈哈</div>
<div style="background-color: red;">哈哈哈--内联样式表</div>
<div id="divId2">哈哈哈--内部样式表</div>
<div id="divId3">哈哈哈</div>
</body>
</html>
1.css文件的代码,在css文件夹
#divId3{
background-color: #00f;
}
4.选择器
- id选择器:一个元素(标签)
要求:
- html元素必须有id属性且有值 <xxx id="id1"></xxx>
- css中通过"#"引入,后面加上id的值 #id1{...}
- class选择器:一类元素
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}
- 元素选择器:一种元素
- 直接用元素(标签)名即可 元素名{…}
4.1派生选择器
- 属性选择器:元素选择器的特殊用法
要求:
html元素必须有一个属性不论属性是什么且有值:
<元素名 nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
元素名[nihao="wohenhao"]{....}
- 后代选择器
- 格式:选择器 后代选择器元素名{…}
- 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
<!--id选择器-->
#spanid{
background-color: gold;
}
#divId1{
background-color: #0000FF;
width: 50%;
}
<!--class选择器-->
.class1{
background-color: aqua;
}
<!--元素选择器-->
span{
background-color: #ff0;
}
<!--属性选择器-->
span[att="haha"]{
background-color: red;
}
<!--后代选择器,div下的span-->
div span{
font-size: 1cm;
}
</style>
<link rel="stylesheet" href="../css/1.css" />
</head>
<body>
<div id="divId1">哈哈哈--id选择器</div>
<div class="class1">哈哈哈--class选择器</div>
<span>哈哈哈--元素选择器</span>
<span att="haha">哈哈哈--属性选择器</span>
<span class="class1" att="haha">哈哈哈</span>
<span id="spanid" att="haha">哈哈哈</span>
<div>
<span>div下的span哈哈哈</span>
</div>
</body>
</html>
4.2锚伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
案例代码(字体颜色根据状态改变颜色)
<!--鼠标移动,字体变颜色,不同状态,显示不同颜色-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<a href="#">移上来试试</a>
</body>
</html>
注意
- 若多个样式作用于一个元素的时候
- 不同的样式,会叠加
- 相同的样式,最近原则
- 若多个选择器作用于一个元素的时候
- 越特殊优先级越高 id优先级最高
5.属性
5.1字体
- font-family:设置字体(隶书) 设置字体家族
- font-size:设置字体大小(可以设置cm单位)
- font-style:设置字体风格
案列代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
font-family: "隶书";
}
#div1{
font-size: 1cm;
}
#div2{
font-style: italic;
}
#div3{
font-family: 隶书;
font-size: 1cm;
font-style: initial;
color: #0000FF;
text-decoration: none;
}
</style>
</head>
<body>
<div id="div0">哈哈哈</div>
<div id="div1">哈哈哈</div>
<div id="div2">哈哈哈</div>
<div id="div3"><a href="#">哈哈哈</a></div>
</body>
</html>
5.2文本(改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进)
- color:文本颜色
- line-height:设置行高
- text-decoration: 向文本添加修饰。 none underline,如设置超链接的文字无下划线
- text-align:文本对齐方式
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
color: #FDF8C7;
}
#div1{
text-align: center;
}
#div2{
line-height: 100px;
}
#div3{
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="div0">哈哈哈</div>
<div id="div1">哈哈哈</div>
<div id="div2">哈哈哈</div>
<div id="div3"><a href="#">哈哈哈</a></div>
</body>
</html>
5.3列表
- list-style-type:设置列表项的类型 例如:a 1 实心圆
- list-style-image:设置图片最为列表项类型
- 使用的时候使用 url函数 url(“/i/arrow.gif”);
5.4背景
background-color:设置背景颜色
background-image:设置图片作为背景 url
5.5尺寸
width:
height:
5.6浮动
float: 可选值 left right
可以将div排在一行
案例代码
<!--一行显示4个div-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{
background-color: #0000FF;
border: 1px solid red;
height: 50px;
width: 50px;
float: left;
}
<!--实现换行-->
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
<!--换行-->
<div class="clear"></div>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
<div class="divClass">哈哈哈</div>
</body>
</html>
6.分类
- clear:设置元素的两边是否有其他的浮动元素
- 值为:both 两边都不允许有浮动元素
- display:设置是否及如何显示元素。
- none:此元素不会被显示。元素不显示
- block:此元素将显示为块级元素,此元素前后会带有换行符。 使元素换行
- inline:默认。此元素会被显示为内联元素,元素前后没有换行符。使元素失去换行的特性
.menu ul li{
list-style-type: none;
display: inline;
}
7.框模型
- 一个元素外面有padding(内边距) border(边框) margin(外边距)
- padding:元素和边框的距离
- margin:元素最外层的空白(元素与元素之间的距离
- border(边框),还可以设置颜色 风格
简写属性:
border:宽度 风格 颜色;
border:5px solid red;
solid:实线
dashed:虚线
double:双实线