目录
1 网页样式
1.1 引入方法
1.1.1内联样式
<标记名 style=”样式属性:样式属性值;样式属性:样式属性值;·······”></标记名>
<div style="font-size:20px; line-height:30px; text-align:center: ">设置想要输入的文本</div>
1.1.2内部样式表
<style type = "text/csS">
选择符1{样式属性:样式属性值;样式属性:样式属性值…}
选择符2{样式属性:样式属性值;样式属性:样式属性值;…}
选择符3{样式属性:样式属性值;样式属性:样式属性值;⋯}
</style>
在<head>中引入<style>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
1.1.3链接外部样式
-
rel=“styesheet”用来定义链接的文件与
html
之间的关系 -
styesheet值表示指定一个固定或者首选的样式
-
type=”text/css”指文件的类型是样式表文本
-
href=”style.css”文件所在的位置
<head> <link href="style.css" rel="stylesheet" type="text/css" </head>
1.1.4导入外部样式
<style>
@ import ulr("样式路径")
</style>
导入外部样式使用import方法,常用如下
@ import ulr(“样式路径”); |
---|
@ import ulr(样式路径); |
@ import “样式路径”; |
@ import ‘样式路径’; |
1.2 基础语法
1.3 选择器的分类
1.3.1标记选择器
css
<style>
h1{
color:"red"
}
html
<h1>标签选择器使用</h1>
1.3.2通用选择器
-
对所有元素都生效
-
符号表示
*{
margin: 0;
padding: 0;
}
1.3.3 i d选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
- HTML元素以id属性来设置id选择器,
CSS
中 id 选择器以 “#” 来定义。 - id名称是唯一的,只能对应于文档中一个具体的元素
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#para1{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">id选择的部分</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
1.3.4类选择器
- class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
- class 选择器在 HTML 中以 class 属性表示,
- 在
CSS
中类选择器以一个点 . 号显示: - 在以下的例子中,所有拥有 center 类的 HTML 元素均为居中
- 所有的 p 元素使用 class=”center” 让该元素的文本居中:
<style>
p.center{
text-align:center;
}
</style>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
2.多个 class 选择器可以使用空格分开
<style>
.center {
text-align:center;
}
.color {
color:#ff0000;
}
</style>
<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中,颜色为红色。</p>
</body>
1.3.5属性选择器
1.3.6后代选择器
E1
E2
{属性1:属性值1;….}
<style type="text/css">
ul a{
color:red;
}
</style>
<body>
<ul>html:<a href="网址地址">html</a></li>
<ul>css:<a href="网址地址">css</a></li>
<ul>javaScript:<a href="网址地址">javaScript</a></li>
</ul>
</body>
1.4 选择器优先级
1.5 css
单位
1.6 给标签元素添加属性
2 网页基础样式添加
原文地址:http://www.cnblogs.com/aixiaohou/p/16921758.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性