目录

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链接外部样式

  1. rel=“styesheet”用来定义链接的文件与html之间的关系

  2. styesheet值表示指定一个固定或者首选的样式

  3. type=”text/css”指文件的类型是样式表文本

  4. 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选择器

  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
  2. HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 “#” 来定义。
  3. 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 元素均为居中
  1. 所有的 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. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性