15-02-20 CSS
一个网页中存在哪些内容由HTML决定，而这些内容长成什么样子由CSS决定;
CSS是Cascading Style Sheet这几个单词的英文缩写，翻译成中文是层叠样式表。CSS能够让网页制作者有效的定制，改善网页的效果。
CSS是对HTML的补充， 网页制作者曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题;之前写出漂亮的网页需要用到大量HTML的属性;
CSS实现了网页内容和页面效果的彻底分离;这句话的意思就是我们在写CSS代码的时候，基本上不去影响HTML;
Ctrl+j弹出智能提示的快捷键;
三种方式向HTML页面中写入CSS代码;
1.内联样式表，
在HTML标签中写入CSS代码;<p style="background:red;font-size:xx-large">今天天气好晴朗</p>
优点:比较灵活，想给谁设置就给谁设置; 缺点：如果要使得其他段落文字也是这样的效果，要写很多重复的代码;
2.嵌入样式表，需要在head标签内写
<head>
<style type = "text/css">
p{ font-size:xx-small;} //给HTML中所有P标签设置样式
</style>
</head>
优点：可以给大批的标签一次性设置样式; 缺点：是给单独的某一个标签设置样式的话比较麻烦;
外部样式表link：
<link href = "Test.css" rel = "stylesheet" /> 这段代码如果不想写的话，可以将那个css文件直接拖到这个HTML页面
link和style是平级的关系，都在head里面;
三种方法的优先级是 内联样式表>嵌入样式表>外部样式表;
样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)
HTML选择器;
<head>
<style type = "text/css">
p{background-color:yellow; font-size:xx-small;} //给HTML中所有P标签设置样式
</style>
</head>
类选择器：//获得指定class的HTML标签;需要给要设置样式的元素的class属性赋值
<tt class = "tt1">床前明月光，疑是地上霜，举头望明月，低头思故乡</tt>
<tt class = "tt2">床前明月光，疑是地上霜，举头望明月，低头思故乡</tt>
<head>
<style type = "text/css">
tt.tt1{ background-color:red; }//给HTML中所有P标签设置样式,也可以去掉tt,写.tt1
tt.tt2{ background-color:green; }
</style>
</head>
ID选择器:
ID选择器用法跟类选择器用法差不多，类选择器前面用.，ID选择器前面加#
<p id = "p1">今天天气好晴朗</p>
<p id = "p2">今天天气好晴朗</p>
<p id = "p3">今天天气好晴朗</p>
<head>
<style type = "text/css">
#p1{ background-color:red;}
#p2{ background-color:green;}
</style>
</head>
当某些元素使用同一个样式的时候，我们使用类选择器，class;
尽量不要给标签赋值同一个id,要保证每一个id都是唯一的。
总而言之，单一给元素样式的时候，用id,给同一类相同的样式的时候就用class；
关联选择器，
<head>
<style type = "text/css">
p em{ background-color:red;}
</style>
</head>
<p><em>今天天气好晴朗</em></p>
<em>今天天气好晴朗</em>
<em>今天天气好晴朗</em>
只有第一行背景颜色变红了，
组合选择器：
<head>
<style type = "text/css">
h1,h2,h3,h4,h5,h6,td{ background-color:red;}
</style>
</head>
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
伪元素选择器
是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。
例如，对于超链接标签(<a></a>)的正常状态 (没有任何动作前)，被访问过的状态，选中状态，光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义
目前常用的伪元素有以下几种
A：active 选中超链接时的状态
A：hover 光标移动到超链接上的状态
A：link 超链接的正常状态
A：visited 访问过的超链接状态
P：first-line 段落中的第一行文本
P：first-letter 段落中的第一个字母
Css当中的属性非常多，大体可以分为以下几类：字体，背景，文本，位置，布局，边缘，列表
字体：
Font-family:该属性用于设置字体系列
Font-size:该属性定义文字的大小， 绝对大小的设置xx-small,x-small,small,medium,large,x-large,xx-large
font-style:该属性用于定义字体样式为Normal,Italic,Oblique
text-decoration:该属性用于在文本中条件下划线，上划线，中划线
font-weight:该属性用于设置粗体字的磅值，normal,bold,bolder,lighter,100-900
背景：
Repeat-x和Repeat-y 分别在水平或者垂直方向上重复
Background-attachment:确定背景图像是否随内容滚动 设置为fixed时，表示固定背景图像，为scroll时，表示图像跟随内容的移动而移动
Background-position:指定背景图像的水平位置和垂直位置，水平位置的取值可以是left,center,right,也可以是数值，垂直的取值可以是top,center,bottom
body{
background-image:url(1.jpg);
Background-attachment:fixed;
Background-color:yellow;
}
我们在网页当中排列元素的时候，所有元素都遵循一个规则，就是从上到下依次去排列，不会有一个重合的，从上到下，从左到右。
由于html元素(比如div)遵循文档流，自己占一层，如果要在这一层里有别的二个div,那么要使这3个div脱离文档流的控制;
<head>
<style type = "text/css">
div {
height : 300px;
width : 300px;
}
div.div1 {
background-color:red;
top:100px; //距离顶端
left:100px;
position:absolute;/*绝对定位，到哪就是哪*/ 破换文档流
z-index:3; //z-index越大，越显示在外面;
}
div.div2 {
background-color:yellow;
top:130px;
left:130px;
position:absolute;
z-index:2;
}
div.div3 {
background-color:green;
top:160px;
left:160px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div class = "div1"></div>
<div class = "div2"></div>
<div class = "div3"></div>
</body>
<head>
<style type = "text/css">
.div {
right : 0px;
bottom : 0px;
position:fixed; //固定;
background-color:green;
height:300px;
width:300px;
}
</style>
</head>
<body>
<div class="div1"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> //把网页变长
</body>
文本：
文本的属性包括：文字间距，对齐方式，上标，下标，排列方式，首行缩进
Word-spacing:设置单词之间的间距
Letter-spacing:设置字符之间的间距
Text-align:设置文本的水平对齐方式，取值可以是left,right,center,justfy
Text-indent:设置第一行文本的缩进值；
Line-height:设置文本所在行的行高;
写网页的时候，其实就是一个盖房子的过程;写网页的时候，也是一个个div堆积起来的，网站中用到了大量的div,看到的小模块就是一个div
盒子模型，一个盒子就是一个div。盒子跟网页，或者说盒子跟div之间的距离用margin表示，margin-top left right bottom
盒子和盒子里面的 内容之间的距离用padding，还有一个border属性指的是盒子的边框;
margin{上，右，下，左};
如果只写三个，{上，左右，下}
如果只写二个，{上下，左右}
如果只写一个，{上下左右}
*{margin:0px;} *表示获得所有标签; margin: 0px; 表示上右下左全部是0;
padding也是这个道理 padding,margin可以写在div里; 有些网页左边和右边有一部分是空白的,
<head>
<style type = "text/css">
.divindex{
width:900px;
height:800px;
background-color:yellow;
margin:0px auto; //居中显示，上下为0，左右自动调整;如果靠右的话，float:right
}
.divlogo{
width:900px;
height:100px;
background-color:red;
}
.divcontent{
width = 900px;
height = 300px;
background-color:green;
}
.divPicture{
width = 300px;
height = 300px;
background-color:blue
float:left; //不加这句靠左漂浮的话，不能达到.divPicture，.divText在.divcontent上填充的效果，会一上一下，因为要遵循文档流;
}
.divText{
width = 300px;
height = 600px;
background-color:purple
float:left;
}
</style>
</head>
<body>
<div class = "divindex">
<!-- logo -->
<div class = "divlogo">
<img src="image/11.jpg" height = 100px width = 900px/>
</div>
<!-- content -->
<div class = "divContent">
<div class = "divPicture"> divText,divPicture漂浮在divContent上;
</div>
<div class = "divText"> </div>
</div>
</div>
</body>
写网页的时候我们都是先把局给一块一块布好，再往里面填内容;我们怎么区分一块一块，一般都给每一块div一个背景颜色;最终写完之后把背景颜色去掉;
<head>
<style type = "text/css">
* { margin:0px; font-size:12px; }
div.divindex{ height:380px; width:290px; background-color:yellow; float:right; }
div.div1{ width = 290px; height:35px; background-color:blue; color:white; text-align:center; // padding:5px;给div加padding他自己也会变大。因此加在P上 }
div.div1 p{ padding:8px font-size :18px; }
#table1{ width:290px; }
td.td2{ color：#246DB2; padding: 6px; border-bottom: 1px dashed #000000; }
td.td3{ color：red; font-weight:bolder; border-bottom: 1px dashed #000000; text-align:right; }
</style>
</head>
<body>
<div class="divindex">
<table id = "table1">
<tr>
<td><div class="div1"><p>.Net培训开班信息</p></div></td>
</tr>
<tr>
<td class="td2">北京，2014年5月5号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class="td2">北京，2014年5月5号</td>
<td class="td3">预约报名中</td>
</tr>
</table>
</div>
</body>
有时候设置样式外面嵌入样式表不行，不妨试试内联样式表;
导航
<head>
<title></title>
<style type = "text/css">
*{margin:0px; }
div{
background-color:yellow;
height:30px;
width:800px;
margin: 0px auto
}
ul li{
float:left //漂浮，可以使得它不是向下排列
list-style:none; //可以去掉ul中li的点
width : 150px //可以使得它排列很均匀，不是贴在一起;
line-height:30px//可以让导航的字下来;
}
A hover{
font-size : x-large;
background-color : pink;
}
</style>
</head>
<body>
<div>
<ul>
<li>公司简介</li>
<li>企业文化</li>
<li>产品介绍</li>
<li>交易大厅</li>
<li>联系我们</li>
</ul>
</div>
</body>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
