C#学习之css（一）

1. css：cascading style sheet 层叠样式表
　　能让网页制作者有效的定制，改善网页效果。css是对html的补充，
　　css实现了网页内容和页面效果的彻底分离。

2.css的三种设置方式
　　1.内联样式表（在标签内设置元素的样式）
　　　　只针对单个标签进行重复设置。
　　2.嵌入样式表（需要在head标签内写<style type="text/css"></style>）
　　3.外部样式表 link

 1 <html>
 2     <head>
 3         <title>css写入3种方式</title>
 4         <!--<style type="text/css">
 5             p{
 6                 background-color:yellow;
 7                 font-size:xx-small;
 8             }
 9         </style>-->
10         <link rel="stylesheet" href="new.css" type="text/css"/>
11     </head>
12     <body>
13         <p style="background-color:red;font-size:xx-large">你好我也好</p>
14         <p>咱俩都不好</p>
15         <p>我好你也好</p>
16     </body>
17 </html>

 


3.样式规则的选择器（通过怎样的途径来获得页面上要设置样式的元素）
　　1.HTML selector
　　2.class selector 类选择器 给元素设置class属性，某些元素显示同类样式
　　　　<style> 元素.classname{} </style> 设置
　　3.ID selector id选择器 给元素设置id属性，保证每个id是唯一的
　　　　<style> #id名{}</style>
　　4.关联选择器：通过 “元素 插入元素”拿到标签
　　5.组合选择器：列举元素

 1 <html>
 2     <head>
 3         <title>css选择器</title>
 4         <style type="text/css">
 5             p.p1{
 6                 background-color:red;
 7             }
 8             #id1{
 9                 background-color:blue;
10             }
11             p em{
12                 background-color:black;
13             }
14             em,td{
15                 background-color:pink;
16             }
17             A:active{
18                 background-color:green;
20             }
22         </style>
23     </head>
24     <body>
25         
26         <p class="p1">你好吗？</p>
27         <p class="p1">你好吗？</p>
28         <p id="id1">你好吗？</p>
29         <p><em>你好吗？<em></p>
30         <em>你好吗？</em>
31         <table border="1px">
32             <tr>
33                 <td>skdklsk</td>
34                 <td>skdklsk</td>
35                 <td>skdklsk</td>
36             </tr>
37         </table>
38         <hr/>
39         <a href="#">超链接</a>
40         <a href="#">超链接</a>
41         <a href="#">超链接</a>
42     </body>
43 </html>

 


　　6.伪元素选择器:指对同一个HTML元素的各种状态和其所包括的部分内容的一种
　　定义方式。
　　　　超链接：
　　　　　　A：active 选中超链接时的状态
　　　　　　A:hover 光标移动到超链接上的状态
　　　　　　A：link 超链接的正常状态
　　　　　　A：visited 访问过的超链接状态

　　　　文本：
　　　　　　P：first-line 段落中的第一行文本
　　　　　　P：first-letter 段落中的第一个字母

 1 <html>
 2     <head>
 3         <title></title>
 4         <style type="text/css">
 5     
 6         p.p1:first-letter{
 7             color:#FF0000;
 8         }
 9         </style>            
10     </head>
11     <body>
12         <p>年是滴哈死哦d</p>
13         <p class="p1">收到复合丝</p>
14     </body>
15 </html>

 


4.属性
　　1.字体
　　　　font-family ：设置字体的系列
　　　　font-size：大小 Xx-small为最小 xx-large 最大
　　　　font-style:定义字体样式为normal，italic，oblique
　　　　text-decoration:文本中条件下划线，上划线，中
　　　　font-weight：设置粗体字的磅值

2.背景
3.文本
4.位置
5.布局
6.边缘
7.列表

posted @ 2016-02-26 23:25  海一涛  阅读(2599)  评论(0)    收藏  举报