HTML基础入门之样式表（二）
2013-10-18 20:56
197 查看
l 概念和基本认识
l 样式选择器
l 伪选择器
l 样式属性
l 布局
1.概念和基本认识：
CSS（层叠样式表）是用来美化网页的。可以对页面元素进行更精致的设置，样式主要描述元素的字体，背景颜色，边框等。
三种使用方式： 元素内联，页面嵌入，外部引用
元素内联：直接将样式写入元素标签中，一般适用于样式没有复用的场合。
例如：<inputtype="button"value="网编"style=" border-width:thick;width:500px;height:100px;"/>
页面嵌入：当页面上某一类元素标签都是一种风格时使用。
例如：
<head>
<title>无标题页</title>
<styletype="text/css">
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
</style>
</head>
外部引用：将固定的样式风格写入一个CSS文件中，需要的时候直接引用，这样复用的范围更广，适用于多个页面复用。（新建web-样式表，使用时在网页头部添加引用）
例如：
<head>
<title>无标题页</title>
<linktype="text/css"rel="Stylesheet"href=styletest1.css/>
</head>
一般情况下只需要改变href中的引用即可。
2.CSS中的计量单位：
px(像素) 、30%（百分比）、em(相对单位）
3.常见样式：
设置边框：border-color/border-style/border-width/
设置可见：display（值为none时元素不显示）
设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)
设置链接：url(链接地址)例如：<inputtype="button"style="background-image:url('Sample%20Pictures/1.gif');height:182px;width:
328px;cursor:url('Sample%20Pictures/1.gif')"/>
4.样式选择器
针对页面嵌入和外部引用，因为其使用范围扩大，所以引申出样式选择器的概念，样式选择器有三种。
1）标签选择器，根据不用的元素标签使用。
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
2）class选择器，命名一个样式，然后在需要使用的元素标签中设该名称为class属性的值表示引用该种样式。可以设多种class，用空格隔开（<inputtype="button"class="ban
love"value="我的快乐"/>），样式名称前加‘.’。
<head>
<title>无标题页</title>
<styletype="text/css"><!--下面这部分可以放入CSS文件中，调用方法为外部引用法-->
.love{background-color:Red;width:100px;height:200px;}
.ban{border-color:Yellow;border-width:thick;}
</style>
</head>
使用：<inputtype="button"class="love"/>
拓展：标签+class选择器
样式名相同，但是对不同的标签有不同的设定。
input.love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label.love{font-size:xx-large;}
使用：
<inputtype="button"class="love"value="我的快乐"/>
<labelclass="love">ssssssssssssss</label>
3）id选择器，跟class选择器类似，样式名称前加‘#’。使用时引用id属性。只是他不能同时使用多种样式。
例如：
#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
<inputtype="button"id="love" value="我的快乐"/>
<labelid="love">ssssssssssssss</label>
同样可以使用标签+id选择器：
input#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label#love{font-size:xx-large;}
使用：
<inputtype="button"id="love" value="我的快乐"/>
<labelid="love">ssssssssssssss</label>
5.其他选择器
1）关联选择器：描述关联标签中的样式。
pstrong{background-color:Blue;}
只有在 <p><strong>sdddgdg</strong></p>中的文本才会有此样式。
2）组合选择器：几种标签都是一种样式。
h1,h6,input{background-color:Red;}
6.伪选择器（经常用，但是格式很固定（超链接常用））
A:visited{text-decoration:none;}
A:active{text-decoration:none;}
A:link{text-decoration:none;}
A:hover{text-decoration:underline;}
上面为常用的样式，当鼠标停留时显示下划线，否则不显示。
2013-12-22日补充：
1.meta 标签一般表示编码格式和关键字与描述（写在head标签中）
2.<pre></pre> 预格式化标签（保留标签内格式）
3.https 多用于登录时使用的协议
Javascript js伪协议（弹窗）
Mailto mailto:邮箱？Subject=主&body=邮件内容
4.每个html页的开头要写上文档类型定义：<!doctype html>
<!DOCTYPE HTML PUBLIC “version name” “url”>
5.<frameset cols/rows=”分页比例”><frame src=”url”>每个分页</frame></frameset> 实现浏览器分页
6.<iframe src=”url”>实现页中页的效果<iframe>
7.<base/>标签，只能出现在html文件开头部分（<head>中）,可用于设定本文件中的超链接的基准地址和target属性（适用于本文件中的所有链接(包括a标签，图片链接)）。
8.设置段落的首字母下沉不用div的情况下可用伪样式选择器：p:first-letter{
Font-size:300%;float:left;}
9.类表前边的项目符号可以设置为图片：list-style-image:url(‘地址’);符号设置：list-style-type:none(无)
10.CSS样式属性：（此部分列出常用的，需要记住）
1.-文本字体样式
颜色，color
字体,font-family
大小,font-size
权重,font-weight (bold,bolder)
修饰,text-decoration (overline(上划线)，line-through(中划线)，underline(下划线)
基线,lineheight (文本放入框中)
对齐，text-align（水平），vertical-align(垂直对齐)
大小写转换,text-transform
字体间距：word/letter-spacing
2.背景样式：
背景色，Background-color
背景图片，background-image
背景图片排列方式，background-repeat
背景图片位置：background-position
11.布局
Visibility:设置元素的可见状态，inherit(继承父层的显示属性)；visible（显示），hidden（隐藏）
Display:inline(将div转换span),block(将span转换成div),none
Float:left,right 浮动 （不会覆盖div内容）
Clear: left,right,both v 清楚浮动
Overflow:visiable,hidden,scroll,auto 设置元素内容超过设置大小后的显示
盒子相关：
Padding（内间距）|margin（外间距）(top,right,bottom,left)
border(top,right,bottom,left,color,width,style（设置边框类型（solid，double等））) 简写： border: 1px,solid,red;
l 样式选择器
l 伪选择器
l 样式属性
l 布局
1.概念和基本认识：
CSS（层叠样式表）是用来美化网页的。可以对页面元素进行更精致的设置，样式主要描述元素的字体，背景颜色，边框等。
三种使用方式： 元素内联，页面嵌入，外部引用
元素内联：直接将样式写入元素标签中，一般适用于样式没有复用的场合。
例如：<inputtype="button"value="网编"style=" border-width:thick;width:500px;height:100px;"/>
页面嵌入：当页面上某一类元素标签都是一种风格时使用。
例如：
<head>
<title>无标题页</title>
<styletype="text/css">
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
</style>
</head>
外部引用：将固定的样式风格写入一个CSS文件中，需要的时候直接引用，这样复用的范围更广，适用于多个页面复用。（新建web-样式表，使用时在网页头部添加引用）
例如：
<head>
<title>无标题页</title>
<linktype="text/css"rel="Stylesheet"href=styletest1.css/>
</head>
一般情况下只需要改变href中的引用即可。
2.CSS中的计量单位：
px(像素) 、30%（百分比）、em(相对单位）
3.常见样式：
设置边框：border-color/border-style/border-width/
设置可见：display（值为none时元素不显示）
设置鼠标指针显示：cursor(常设值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的图标自设指针形状)
设置链接：url(链接地址)例如：<inputtype="button"style="background-image:url('Sample%20Pictures/1.gif');height:182px;width:
328px;cursor:url('Sample%20Pictures/1.gif')"/>
4.样式选择器
针对页面嵌入和外部引用，因为其使用范围扩大，所以引申出样式选择器的概念，样式选择器有三种。
1）标签选择器，根据不用的元素标签使用。
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
2）class选择器，命名一个样式，然后在需要使用的元素标签中设该名称为class属性的值表示引用该种样式。可以设多种class，用空格隔开（<inputtype="button"class="ban
love"value="我的快乐"/>），样式名称前加‘.’。
<head>
<title>无标题页</title>
<styletype="text/css"><!--下面这部分可以放入CSS文件中，调用方法为外部引用法-->
.love{background-color:Red;width:100px;height:200px;}
.ban{border-color:Yellow;border-width:thick;}
</style>
</head>
使用：<inputtype="button"class="love"/>
拓展：标签+class选择器
样式名相同，但是对不同的标签有不同的设定。
input.love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label.love{font-size:xx-large;}
使用：
<inputtype="button"class="love"value="我的快乐"/>
<labelclass="love">ssssssssssssss</label>
3）id选择器，跟class选择器类似，样式名称前加‘#’。使用时引用id属性。只是他不能同时使用多种样式。
例如：
#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
<inputtype="button"id="love" value="我的快乐"/>
<labelid="love">ssssssssssssss</label>
同样可以使用标签+id选择器：
input#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label#love{font-size:xx-large;}
使用：
<inputtype="button"id="love" value="我的快乐"/>
<labelid="love">ssssssssssssss</label>
5.其他选择器
1）关联选择器：描述关联标签中的样式。
pstrong{background-color:Blue;}
只有在 <p><strong>sdddgdg</strong></p>中的文本才会有此样式。
2）组合选择器：几种标签都是一种样式。
h1,h6,input{background-color:Red;}
6.伪选择器（经常用，但是格式很固定（超链接常用））
A:visited{text-decoration:none;}
A:active{text-decoration:none;}
A:link{text-decoration:none;}
A:hover{text-decoration:underline;}
上面为常用的样式，当鼠标停留时显示下划线，否则不显示。
2013-12-22日补充：
1.meta 标签一般表示编码格式和关键字与描述（写在head标签中）
2.<pre></pre> 预格式化标签（保留标签内格式）
3.https 多用于登录时使用的协议
Javascript js伪协议（弹窗）
Mailto mailto:邮箱？Subject=主&body=邮件内容
4.每个html页的开头要写上文档类型定义：<!doctype html>
<!DOCTYPE HTML PUBLIC “version name” “url”>
5.<frameset cols/rows=”分页比例”><frame src=”url”>每个分页</frame></frameset> 实现浏览器分页
6.<iframe src=”url”>实现页中页的效果<iframe>
7.<base/>标签，只能出现在html文件开头部分（<head>中）,可用于设定本文件中的超链接的基准地址和target属性（适用于本文件中的所有链接(包括a标签，图片链接)）。
8.设置段落的首字母下沉不用div的情况下可用伪样式选择器：p:first-letter{
Font-size:300%;float:left;}
9.类表前边的项目符号可以设置为图片：list-style-image:url(‘地址’);符号设置：list-style-type:none(无)
10.CSS样式属性：（此部分列出常用的，需要记住）
1.-文本字体样式
颜色，color
字体,font-family
大小,font-size
权重,font-weight (bold,bolder)
修饰,text-decoration (overline(上划线)，line-through(中划线)，underline(下划线)
基线,lineheight (文本放入框中)
对齐，text-align（水平），vertical-align(垂直对齐)
大小写转换,text-transform
字体间距：word/letter-spacing
2.背景样式：
背景色，Background-color
背景图片，background-image
背景图片排列方式，background-repeat
背景图片位置：background-position
11.布局
Visibility:设置元素的可见状态，inherit(继承父层的显示属性)；visible（显示），hidden（隐藏）
Display:inline(将div转换span),block(将span转换成div),none
Float:left,right 浮动 （不会覆盖div内容）
Clear: left,right,both v 清楚浮动
Overflow:visiable,hidden,scroll,auto 设置元素内容超过设置大小后的显示
盒子相关：
Padding（内间距）|margin（外间距）(top,right,bottom,left)
border(top,right,bottom,left,color,width,style（设置边框类型（solid，double等））) 简写： border: 1px,solid,red;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML基础样式（三）
- HTML基础入门2
- 前端入门 —— HTML 基础知识一勺烩
- HTML基础入门 第1天课堂笔记
- 前端开发入门：html和css基础知识回顾
- Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
- HTML基础：在网页中使用CSS定义样式（4）
- 学习笔记-《零基础学习HTML5—html+css基础 》4.CSS基础样式（上）
- [php入门] 4、HTML基础入门一篇概览
- 5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
- html css层叠样式基础（样式的继承）（五）
- html 盒子模型基础（display ，overflow，默认样式）（四）
- Web前端基础（三）：网页布局与样式入门
- HTML入门与基础 —— 标签《一》
- HTML入门（二）基本布局、样式
- 前端零基础入门（三）：HTML，CSS，Javascript三者之间的关系
- HTML+CSS基础入门-第一天（HTML-HTML语法）
- Html基础学习之标签和样式
- HTML基础入门2
- HTML基础第一课（div,span标签，选择器，文本样式）