C#学习之css（一）

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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
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.列表。