css 选择器和属性

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视频

http://www.w3school.com.cn