css概述:
css(Cascading Style Sheet)层叠样式表,是对html进行样式修饰的语言。
css即样式定义如何显示 HTML 元素
样式通常存储在css文件中,解决了内容(html)与表现(css)分离的问题
如果有多个css同时修饰一个html文件,那么css冲突的部分(即多个样式都修饰一个html标签的内容),会使用优先级高的样式,不冲突的部分,共同修饰,如下图所示
1 css的作用
- css修饰html,使得html更美观
- html的内容(html)与样式(css)相分离,便于后期维护
- html和css分开,同一个样式可用于多个html中,提高代码重用性
2语法
selector {property1: value;property2: value}
selector要改变样式的html元素,即标签 ,花括号包围声明,属性和值之间用冒号隔开,多个属性之间用分号隔开,最后的分号可加可不加,
为了便于后期维护,还是加上分号较好
颜色值:可以用单词red orange等
也可以用rgb16进制的值,如#ff0000 代表红
还可以使用color:rgb(255,0,0)或者color:rgb(100%,0%,0%)来表示红色
如果值为多个单词,使用双引号
字体大小要记得加单位px,(html可不加,默认为px),如font-size:50px
3 html中加入css的四种方式
方式1,内嵌式,将css的代码嵌入到html标签语句中,html每个标签都有style属性,将style属性的值设为css的表达方式即可,如下
<div style="color:blue;font-size:50px" > helloworld<div>
<!--css嵌入到html标签,修饰这个标签-->
方式2,内部样式,使用<style></style>标签,属性type的值为"text/css",包裹住要编写的标签样式(css代码),代码多的时候不建议使用,因为浏览器从上往下加载,代码多会影响加载速度,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" >
div{ <!--方式2,内部样式-->
color:red;
font-size:60px;
}
</style>
<title>css的引入</title>
</head>
<body>
<div> helloworld</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>
方式3,链入外部样式,在html中使用标签<link />将外部样式(css文件)引入到html中,这种方式推荐使用
<link/>链入外部文件标签 ,属性
rel:不认识这个属性,引入css的时候将该属性设为"stylesheet"
type:引入的类型,引入css值为"text/css"
href:引入css的路径
如下,定义html中的<div></div>标签内容的样式,css文件
div{
color:red;
font-size: 50px;
}
在html中引入css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--方式3,引入外部文件,可放到</body>标签的后面-->
<link rel="stylesheet" type="text/css" href="css/embeed.css" />
<title>css的引入</title>
</head>
<body>
<div> hello world</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>
方式四:.@import方式,使用<style></style>标签中设置type属性值为"text/css",包裹住@import语句,形式如下
<style type="text/css">
@import url("css文件地址")
</style>
css文件不变,下面是html通过方式四引入css的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--方式4,通过@import方式引入外部css文件-->
<style type="text/css">
@import url("css/embeed.css")
</style>
<title>css的引入</title>
</head>
<body>
<div> hello world</div>
<div> <span>world</span> <span>hello</span></div>
</body>
</html>
四种引入css修饰html的方式的区别:
方式1每次只能修饰单个标签,且代码复用性低,不易维护
方式2,如果css代码多,会导致浏览器加载速度慢,可以将css代码部分放到</body>标签后,先加载html,再加载css部分
方式3,链入外部css文件,所有浏览器支持,可讲链入语句放到</body>后面,浏览器先加载html,再加载css,提升速度,支持javascript动态修改
方式4,有些浏览器不支持,加载完html后才加载css,可提升速度,不支持javascript动态修改css
4 css中的注释样式
css中的注释样式如下:
/*
注释内容
*/
html中的注释样式如下:
<!-- 注释内容-->
注意:在html中以内部方式2引入css后,在css代码部分即<style type="text/css"></style>之间的注释属于css的注释!
一 选择器
选择器的作用是用来定位到某个或者某组标签的,因为你要修饰的标签和你写的修饰代码总要一一对应吧
1 基本选择器
1元素选择器:
元素选择器的作用是,对html文件中同一种元素(即同一种html标签)设置样式,语法为:html标签名{css属性:值;css属性:值;}
比如要将段落设置成灰色:
p {color:gray;}
示例:
css文件:
/*
元素选择器
*/
div{
color:red;
font-size: 20px;
}
span{
color:pink;
font-size: 30px;
}
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div> hello world 中国加油</div>
<div> <span>hello world</span> <span>中国加油</span> </div>
<div> hello world 中国加油</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic1.css" />
</html>
2 ID选择器,以一种独立于文档元素的方式来指定样式,html标签都有一个id属性,id可以用来区分同种标签也可以用来区分不同标签
我们可以给html标签设置id值,然后用id选择器来指定它的样式,注意id具有唯一性,第一个字符不能使用数字,语法:
#id值{css属性:值}
示例:
/*
ID选择器,一次只能设置一个
*/
#div1{
color:red;
font-size: 20px;
}
#div2 {
color: yellow;
font-size:10px;
}
#span1{
color:pink;
font-size: 50px;
}
#span2{
color:pink;
font-size: 50px;
}
对应的html文件为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
</head>
<body>
<div id="div1"> hello world 中国加油</div>
<div id="div2"> hello world 中国加油</div>
<div id="div3"> <span id="span1">hello world</span> <span id="span2">中国加油</span> </div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic2.css" />
</html>
2 类(class)选择器,html的标签有个属性class,意思是可以设置标签的分组,即便不同种类的标签,也可以分为同一组,注意:类名的第一个字符也不能是数字
语法:
.class值{css属性:值}
说明: .是英文字符的点
示例:css文件
/*
类选择器,
*/
.div1 {
color:red;
font-size:20px;
}
.div2{
color:pink;
font-size:40px;
}
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
</head>
<body>
<div id="div1" class="div1"> <!-- 第1行" -->
hello world
</div>
<div id="div2" class="div1"><!-- 第2行 -->
hello world
</div>
<div id="div3"> <!-- 第3行 -->
<span id="span1" class="div1"> <!-- 第3行 第1个-->
hello world
</span>
<span id="span2" class="div2"> <!-- 第3行 第2个-->
中国加油
</span>
</div>
<div class="div2"> <!-- 第4行 -->
hello
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic3.css" />
</html>
说明:选择器的优先级:id选择器>类(class)选择器>元素选择器
2 属性选择器
如果一个标签具有多个属性,而根据属性值的不同,来选择该某个标签,使用属性选择器
语法1
用法1: *[某属性]{css属性:值} 对具有该属性的所有元素设置样式,星号可省略
如:
*[name]{color:red;} 将所有具有name属性的元素都设置成红色
语法2
用法2: 某种标签[某属性1][某属性2]{css属性:值} 对有(一个或)多个该属性的某种标签修改样式
如:
a[href] {color:red;} 有的<a>标签没设置href属性,有的设置了href属性,将设置了href的标签选中修改为红色
语法3:
用法3: 标签类型[属性1="属性值"][属性2="属性值"]{ css属性:值} 可以根据(一个或)多个属性值来选择某种类型标签
示例:
/*
属性选择器,
*/
a[name][href]{
color:yellow;
font-size:15px;
}
input[type="text"]{
background-color: green;
}
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a name="链接1" href="#">链接1 </a> <br/>
<a name="链接2" >链接2 </a> <br/>
<div>
<span>
输入
</span>
<span>
<input type="text" name="input" >
</span>
</div>
<div>
<span>
密码
</span>
<span>
<input type="password" name="passwd" >
</span>
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic4.css" />
</html>
3 伪元素选择器
伪元素用于向某些选择器设置特殊效果,常用于链接标签,即<a></a>标签,其他关于伪元素的内容请访问:http://www.w3school.com.cn/css/css_pseudo_elements.asp
<a></a>标签应用伪元素选择器的格式:
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
示例:css
/*
伪元素选择器
*/
a:link {
color:red;
}
a:hover {
color:black;
}
a:active {
color:yellow;
}
a:visited{
color:green;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http:www.baidu.com" > 转向百度</a>
</body>
<link rel="stylesheet" type="text/css" href="css/basic5.css" />
</html>
这是鼠标指着此链接的时候,即悬浮状态,是黑色的
4 层级选择器
根据优先级,id选择器>class选择器>元素选择器,依次选择层级关系
语法:父级选择器 子级选择器 ...{ css属性:值}
示例:css
/*
层级选择器,根据优先级,id选择器>class选择器>元素选择器,可以依次设置层级关系
*/
#div1 .word { /* 只选到某行 */
color:red;
background-color: green;
}
#div1 .ppt span{ /* 选到了某行的某个小标签*/
color:black;
background-color:yellow;
}
#div2 .ppt{
color:orange;
background-color: blue;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1">
<div class="word">
<span> 第1块第1行</span>
</div>
<div class="ppt">
<span> 第1块第2行</span>
</div>
</div>
<div id=div2>
<div class="word">
<span> 第2块第1行</span>
</div>
<div class="ppt">
<span> 第2块第2行</span>
</div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/basic6.css" />
</html>
更过内容可访问(http://www.w3school.com.cn/css/css_selector_descendant.asp)
二 常用属性
css是用来修饰html元素的,有很多属性,下面介绍下常用的属性
1 文字属性
以下为设置文字的常用属性
font-size 设置字体的尺寸。单位必须要写,px像素, 或者用em,1em 的默认尺寸是 16 像素,转换关系pixels/16=em
font-family 设置字体类型。
font-size-adjust 当首选字体不可用时,对替换字体智能缩放。
font-stretch 对字体水平拉伸。
font-style 设置字体风格。
font-weight 设置字体的粗细。
示例:这段代码css引入的方式为在html中使用<style></style>标签,设置属性type值为"text/css",
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css字体属性</title>
</head>
<body>
<div>
<span> 我们要加油!</span>
</div>
</body>
<style type="text/css">
/* 引入css的这一部分的注释方式为css的注释方式*/
span{
/* font-size: 16px; */
font-size:3em;
font-family: 楷体;
}
</style>
</html>
2 文本属性
CSS 文本属性可定义文本的外观。文本属性的作用是可以设置文本颜色,有无下划线,字符间距,对齐方式,缩进等样式,列举常用属性:
color 文本颜色,值为颜色名称单词如red,或者十六进制数字如#ff0000(代表红),或rgb数值,如rgb(255,0,0)代表红
text-decoration 向文本添加修饰。值为overline在文本上方画一条横线,ling-through在文本中间画一条横线,underline下划线,none本属性什么也不设置
text-align 元素中文本的对齐方式,值为 left,center,right
line-height 行间距。值为像素值或者百分比,当前字体尺寸的百分比,或者长度,如1cm
text-indent 缩进元素中 文本的首行。值为长度,如1cm,2cm或者百分比,这个段落长度的百分比
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文本属性</title>
</head>
<body>
<p>
鹅鹅鹅, <br/>
曲项向天歌。 <br/>
白毛浮绿水, <br/>
红掌拨清波。 <br/>
</p>
</body>
<style type="text/css">
p{
color: green;
text-decoration: underline;
text-align: center;
line-height: 1cm;
text-indent: 0.5cm;
}
</style>
</html>
3 背景属性
css既可以用纯色作背景,也可以用背景图像做背景或做出复杂的效果
设置格式为
body{背景属性:属性值;}
常用的属性:
background-color:背景颜色
background-image:背景图片值为url(“图片地址”);
background-repeat:背景图像的平铺方式,默认横向纵向平铺把网页占满,值为repeat横向纵向平铺no-repeat:不平铺repeat-y:纵向平铺repeat-x横向平铺
background-position 背景图像的起始位置。值可以是x% y%,也可以是xpos ypos,任何css支持的单位均可,或者使用left top等方式也可以设置
示例: 因为网页背景色设成了红色,为了能看清网页的字体,在<div></div>标签中引入了css,对文字设置了颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景属性</title>
</head>
<body>
<div style="color:black">hello</div>
</body>
<style type="text/css">
body{
background-color: red;
background-image: url("images/01.png");
background-repeat: repeat-y;
background-position: 80px 80px;
}
</style>
</html>
4 列表属性
CSS提供的 列表属性可以放置、改变列表项标志,还可以把图片当作列表项标志。
常用的列表属性:
list-style-type:列表项前的小标志,值为decimal以数字作为标记,none无标记,decimal-leading-zero以0开头的数字,如01,02...还有好多,none不设置小标志
list-style-image:列表项前的小图片,值为url(“图片地址”)
list-style-position:规定列表中列表项目标记的位置,值为indise和outside,简单理解为是否相对与上一行的非列表项是否有缩进,默认为outside
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css列表属性</title>
</head>
<body>
<ul>
<li>青菜</li>
<li>萝卜</li>
<li>白菜</li>
</ul>
</body>
<style type="text/css">
ul{
list-style-type: decimal-leading-zero;
list-style-image: url("images/02.png");
list-style-position: inside;
}
</style>
</html>
5 尺寸属性
设置元素的高度和宽度,以及行间距等,常用的属性如下:
height:高度 值为length,可以是像素值如10px,1cm等单位,或者百分比(块级对象的百分比作为高度),如50%
width:宽度 值跟height设置方法一样
line-height:行间距 值为length 固定的行间距,如1cm 或者数字(数字与当前字体尺寸的乘积作为行间距)如1,2,也可以设置像素值,如10px,或者百分比(当前字体尺寸的百分比作为行间距),如50%
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css尺寸属性</title>
</head>
<body>
<div id="div1">
helloworld
</div>
<div id="div2">
helloworld
</div>
<div id="div3">
helloworld
</div>
</body>
<style type="text/css">
#div1{
height:50px;
width:50px;
}
#div2{
height:50px;
width:50px;
line-height: 30px;
}
#div3{
height:60px;
width:50px;
line-height: 90px;
}
</style>
</html>
一般情况下不用设置行间距属性吧
盒子(框)模型
html中有些标签可以多层嵌套,比如<div></div>标签,假设将这种标签看作是一个盒子,盒子里面装有东西,就可以用上盒子模型了,盒子模型可以用来排版布局.
如下图示意:
一 一来看,先看边框border,上述的盒子分为两个边框,内边框和外边框,可以通过边框的属性设置元素边框的样式、宽度和颜色
说明:外层背景适用于由元素边框和外边框组成的区域
边框border的常用属性如下:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
再看内边距: 内边距指的是边框和内容区之间。
内边距属性 padding ,它定义元素外边框与元素内容之间的空白区域,看下padding的取值,padding 属性接受长度值(包括像素,em)或百分比值,但不允许使用负值,
取值形式:
10px;代表上下左右都是10px
1px 2px 3px 4px;四个值对应的顺序是上 右 下 左
1px 2px;如果只有两个值那么第一个值代表上下,第二个值代表左右
1px 2px 3px;如果三个值,第一个代表上,第二个代表左右,第三个代表下
padding-top: 该属性还可以单独设置每个边,还有padding-right, padding-bottom, padding-left
外边距:代表者外边框和其他元素之间的距离,
外边距属性margin,看下margin的取值,margin属性接受任何长度单位,可以是像素、英寸、毫米或 em。
取值形式:
10px;代表上下左右都是10px
1px 2px 3px 4px;四个值对应的顺序是上右下左
1px 2px;只有两个值的话,第一个值对应上下,第二个值对应左右
1px 2px 3px;设置为三个值的话,第一个值对应上,第二个值对应左右,第三个值对应下
margin-top:该属性还可以单独设置每个外边距,类似的还有margin-bottom,margin-left,margin-right
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
<div class="wai">
<div class="nei" >hello</div>
</div>
</body>
<style type="text/css">
.wai{
width:120px;
height:120px;
border-width: 1px;
border-color: green;
border-style:solid;
padding: 10px 20px 30px 40px;
margin: 20px 40px;
background-color: yellow;
box-sizing:border-box;
}
.nei{
width:60px;
height:80px;
color: red;
border-style: solid;
background-color: orange;
}
</style>
</html>
注意:
1盒子设置padding,设置不当的时候,会改变盒子的形状,不设置 padding的盒子形状不会改变
2在某层盒子中加入下面三行代码,即便设置了padding也不会被撑爆,超过盒子的宽或者高时,维持在不被撑爆的样子
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
3盒子外观的宽度=2*border的宽度+2*padding的宽度+内容的宽度,默认两边border厚度相同,两边的padding宽度也相同,计算高度同理
参考:小猴子javaWeb视频