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 >你好我也好</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
cssclass属性
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.列表
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论