CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页
后面的代码都是在html文件中编写的
CSS的四种样式表:1.内联样式表
<html><head><meta charset="utf-8" /></head><body><p style="color:red">这是一个p标签</p></body></html>
CSS的四种样式表:2.嵌入样式表
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color:green;}</style></head><body><p>这是一个p标签</p></body></html>
CSS的四种样式表:3.外部样式表
CSS文件内容（文件名style.css）
p{color:red}
html引用CSS
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="StyleSheet1.css" type="text/css"/></head><body><p>这是一个p标签</p></body></html>
CSS的四种样式表:4.输入样式表
<html><head><meta charset="utf-8" /><title></title><style type="text/css">@import url("StyleSheet1.css");</style></head><body><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:HTML Selector
可以同时对同一类标签进行设置 但是无法对单个标签进行设置
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color:green;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:Class Selector
可以对单个标签进行设置也可以对多个标签进行,需要设置class的值.
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p.P1{background-color: blue;}p.P2{background-color: red;}p.P3{background-color: green;}</style></head><body><p class="P1">这是一个p标签</p><p class="P2">这是一个p标签</p><p class="P3">这是一个p标签</p><p class="P3">这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:ID Selector
可以对单个标签进行设置也可以对多个标签进行,需要设置id的值.
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#P1{background-color: green;}#P2{background-color: red;}#P3{background-color: blue;}</style></head><body><p id="P1">这是一个p标签</p><p id="P2">这是一个p标签</p><p id="P3">这是一个p标签</p><p id="P3">这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:关联选择器
添加em为特殊关键字,使用HTML Selector 进行设置
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p em{background-color: green;}</style></head><body><p><em>这是一个p标签</em></p><p><em>这是一个p标签</em></p><p>这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:组合选择器
在HTML Selector 基础上同时对多种标签进行设置
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p,div,span{background-color: blue;}</style></head><body><p>这是一个p标签</p><p>这是一个p标签</p><div>这是一个div标签</div><div>这是一个div标签</div><span>这是一个Span标签</span><span>这是一个Span标签</span></body></html>
CSS样式规则的选择器:伪元素选择器
大多数时候用于超链接文本
常用伪标签
-
active 选中超链接的状态
-
hover 光标移动到超链接上的状态
-
link 超连接的正常状态
-
visited 访问过得超链接状态
-
first-line 段落中的第一行文本
-
first-letter 段落中的第一个字母
<html><head><meta charset="utf-8" /><title></title><style type="text/css">a:active{background-color: blue;}</style></head><body><a href="http://www.baidu.com">百度</a><a href="#">天猫</a><a href="123">淘宝</a><a href="222">京东</a></body></html>
CSS样式属性:字体
-
Font-family 设置字体
-
Font-size 设置文字大小,绝对大小 设置xx-small、x-small、small、medium、large、x-large、xx-large
-
font-style 设置字体样式 Normal Itlic 或者 Oblique(斜体)
-
text-decoration 设置在文本中条件下划线、上划线、中划线、闪烁效果
-
font-weight 设置粗体字磅值normal、bold、bolder、lighter、100-900
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{font-family: 'MS UI Gothic';font-size:large;font-style: italic;text-decoration: blink;font-weight:lighter;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式属性:背景
-
background-color 设置元素的背景色
-
background-image 设置元素的背景图像
-
background-repeat 设置背景图像是否重复出现
-
repeat 在水平和垂直上垂直 repeat-x 水平方向上重复 repeat-y 垂直方向上重复
-
backgroung-attachment 设置背景图像是否跟随内容滚动 fixed sroll
-
background-position 设置背景图像的水平位置和垂直位置水平:left、center、right.垂直:top、center、buttom.
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color: red;background-image: url(image/2.png);background-repeat: repeat-x;background-attachment: local;background-position: left;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式属性:文本
-
word-spacing 设置单词之间的间距
-
letter-spacing 设置字符之间的间距
-
text-align 设置文本的水平对齐方式 left、right、center、justfy
-
text-indent 设置第一行文本的缩进值
-
line-height 设置文本所在行高
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{word-spacing: 24px;letter-spacing: 10px;text-align: right;text-indent:10px;line-height:20px;}</style></head><body><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p></body></html>
CSS样式属性:位置
-
position 设置对象的定位方式 absolute绝对定位、relative相对定位、static无特殊定位
-
left 设置元素的左边水平位置
-
top 设置元素的顶部垂直位置
-
width 设置元素显示的宽度
-
height 设置元素显示的高度z-index 使用定位后
<html><head><meta charset="utf-8" /><title></title><style type="text/css">p{position:relative;left:20px;top:20px;width:10px;height:30px;z-index:5;}</style></head><body><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p></body></html>
CSS样式属性:边缘
-
margin 设置元素的边界与其他元素的空隙大小
-
margin-top 设置元素上边界与其他元素之间的空隙大小
-
margin-right 设置元素的右边界与其他元素之间的空隙大小
-
margin-bottom 设置元素的下边界与其他元素之间的空隙大小
-
margin-left 设置元素的左边界与其他元素之间的空隙大小
-
-
padding 设置元素边界与内部内容之间的空隙大小
-
padding -top 设置元素上边界与内部内容之间的空隙大小
-
padding -right 设置元素的右边界与内部内容之间的空隙大小
-
padding-bottom 设置元素的下边界与内部内容之间的空隙大小
-
padding -left 设置元素的左边界与内部内容之间的空隙大小
-
-
width 设置元素边框的宽度 thin细、medium中、thick粗
-
border-top-width 设置元素上边框宽度
-
border-right-width 设置元素右边框宽度
-
border-left-width 设置元素左边框宽度
-
border-bottom-width 设置元素下边框宽度
-
-
color 设置元素边框颜色
-
border-top-color 设置元素上边框颜色
-
border-right-color 设置元素右边框颜色
-
border-left-color 设置元素左边框颜色
-
border-bottom-color 设置元素下边框颜色
-
-
style 设置元素边框的样式 none无、dotted点线、dashed虚线、solid实线、double双线、groove凹槽、ridge凸槽、inser凸边、outset凹边
本文来自博客园，作者：Rlwyms，转载请注明原文链接：www.seozatan.com
浙公网安备 33010602011771号