CSS样式表
层叠样式表：CSS Cascading Style Sheet。V2.1 （3.0版本有些旧系统不支持）
控制页面样式外观。
一、样式表分三类：
1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。
<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> （solid意思是实线）
2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。
<head>
...
<style type="text/css">
input
{
border:0px;
border-bottom:1px solid red;
}
</style>
</head>
3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。
(1)外部样式表的定义
(2)外部样式表的调用
新建一个css文件，用来放样式表，如果要在HTML文件中调用样式表，需要在HTML文件中点右键--css样式--附加样式表。一般用link连接方式
二、样式表的选择器：
内嵌、外部样式表的一般语法：
选择器
｛
样式=值;
样式=值;
样式=值;
....
｝
1.基本：
(1)标签选择器：用标记名称来当选择器。
input{.....}
div{...}
span{...}
td{...}
(2)类别选择器：在HTML元素中使用class对元素进行分类，然后使用这个class的值作为选择器。以"."开头
.class的名{.....}
(3)ID选择器：针对HTLM中相应ID的元素起作用。以"#"开头
#ID的名{...}
#d1{font-size:48px;}
#dd{border:5px dotted red;}
2.复合：
(1)用逗号隔开。——并列关系，同时起作用。
input,#dd,.yellow,.uu
{
color:gray;
line-height:28px;
}
(2)用空格隔开。——后代关系。
div uu
{
background-color:blue;
}
<input name="txt" type="text" class="uu"/>
<div>
<input name="txt" type="text" />
<input name="txt" type="text" class="uu" value="******"/>
<span>
<input name="txt" type="text" class="uu" value="******"/>
</span>
</div>
什么是后代？？？后代即父辈以后的都是后代 而子集值包含下一代
注意：<p>里面不要配div 反之则可以
(3)class二次筛选。
标签选择器.class选择器{....}
input.uu
{
border:5px double red;
}
例：
对比：div .uu与div.uu的不同。
中间有空格的表示后代，没有空格的是筛选的意思。
三、样式属性
1、背景与前景
background-color:#90; 背景色，样式表优先级高
background-image:url(路径) 设置背景图片（默认）
background-attachment:fixed; 背景是固定的，不随字体滚动
background-attachment:scroll; 背景随字体滚动
background-repeat:no-repeat; no-repeat,不平铺；repeat，平铺repeat-x，横向平铺；repeat-y，纵向平铺
background-position:center; 背景图居中 ，设置背景图位置时，repeat必须为“no-repeat”
background-position: right top 背景图放到右上角，
background-position: left 100px top 200px; 离左边100像素，离上边200像素（可以设为负值）
字体
font-family:"新宋体"； 字体。常用微软雅黑，宋体
font-size:12px; 字体大小，常用像素12px.14px（网站常用12px和14px）,18px,还可以用“em”,"2.5em"即：默认字体的2.5倍，还可以用百分数
font-weight:bold; bold是加粗。normal是正常
font-style:italic; 倾斜，normal是不倾斜
color:#03C; 颜色
text-decoration:underline; 下划线，overline是上划线，line-through是删除线，none是去掉下划线
text-align:center; 水平 居中对齐。left是左对齐。right是右对齐
vertical-align：middle； 垂直 居中对齐，top是顶部对齐，bottom是底部对齐。一般设置行高后使用，div垂直居中 要把行高拉开能表现出来
text-indent:28px; 首行缩进量
line-height:24px; 行高，一般为1.5到2倍字体大小
2、边界和边框
| border | margin | padding | |
| top | |||
| right | |||
| bottom | |||
| left |
border(表格边框），样式等margin（表外间距）padding（内容与单元格间距）
border:5px solid blue;/*四边框；5像素宽，实线，蓝色相当于以下3行*/
border-width:5px;
border-style:solid;
border-color:blue;
注意 4个边框的顺序是顺时针方向 上 右 下 左
3、列表与方块
width height（top right bottom left） 只有在绝对坐标情况下才有用
list-style：none； 取消序号
list-style-image：url 图片做序号
list-stylel ：circle 序号变圆圈，样式相当于无序
list-style-position：outside 序号在内容外 显示不出来
list-style-position：inside 序号跟内容在一起 会挤着往右走
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
