您的位置：首页 > Web前端 > CSS

C#学习之css（一）

2016-02-26 23:25 603 查看

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

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

<html>
<head>
<title>css写入3种方式</title>
<!--<style type="text/css">
p{
background-color:yellow;
font-size:xx-small;
}
</style>-->
<link rel="stylesheet" href="new.css" type="text/css"/>
</head>
<body>
<p style="background-color:red;font-size:xx-large">你好我也好</p>
<p>咱俩都不好</p>
<p>我好你也好</p>
</body>
</html>

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

<html>
<head>
<title>css选择器</title>
<style type="text/css">
p.p1{
background-color:red;
}
#id1{
background-color:blue;
}
p em{
background-color:black;
}
em,td{
background-color:pink;
}
A:active{
background-color:green;
}
</style>
</head>
<body>

<p class="p1">你好吗？</p>
<p class="p1">你好吗？</p>
<p id="id1">你好吗？</p>
<p><em>你好吗？<em></p>
<em>你好吗？</em>
<table border="1px">
<tr>
<td>skdklsk</td>
<td>skdklsk</td>
<td>skdklsk</td>
</tr>
</table>
<hr/>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>

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

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

<html>
<head>
<title></title>
<style type="text/css">

p.p1:first-letter{
color:#FF0000;
}
</style>
</head>
<body>
<p>年是滴哈死哦d</p>
<p class="p1">收到复合丝</p>
</body>
</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.列表

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航