WEB前端：css之选择器和插入样式表
2016-11-16 19:18
375 查看
概念：
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
HTML 标签原本被设计为用于定义文档内容，如下实例：
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
css选择器：id和class
例：<div id="head">和<div class="content_form">
调用：#head .content_form (id前面有个#
class前面有个小点)
ID属性不要以数字开头，数字开头的ID在
Mozilla/Firefox 浏览器中不起作用。
class
选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
css插入样式表分为三种：
1.内联样式（在
HTML 元素内部） 2.内部样式表（位于 <head> 标签内部） 3.外部样式表
1.由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
2.当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用
<style> 标签在文档头部定义内部样式表，
3.当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用
<link> 标签链接到样式表。 <link> 标签在（文档的）头部。
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
层叠次序：
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
当同一个 HTML 元素被不止一个样式定义时，内联样式（在
HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
如果使用了外部文件的样式在
<head>中也定义了该样式，则内部样式表会取代外部文件的样式。
内部样式表：
图：
外部样式表：
图：
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式解决了一个很大的问题
HTML 标签原本被设计为用于定义文档内容，如下实例：<h1>这是一个标题</h1>
<p>这是一个段落.</p>
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
css选择器：id和class
例：<div id="head">和<div class="content_form">
调用：#head .content_form (id前面有个#
class前面有个小点)
ID属性不要以数字开头，数字开头的ID在
Mozilla/Firefox 浏览器中不起作用。
class
选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
css插入样式表分为三种：
1.内联样式（在
HTML 元素内部） 2.内部样式表（位于 <head> 标签内部） 3.外部样式表
1.由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
2.当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用
<style> 标签在文档头部定义内部样式表，
3.当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用
<link> 标签链接到样式表。 <link> 标签在（文档的）头部。
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
层叠次序：
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
当同一个 HTML 元素被不止一个样式定义时，内联样式（在
HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
如果使用了外部文件的样式在
<head>中也定义了该样式，则内部样式表会取代外部文件的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>常用标签学习</title>
</head>
<body>
<div style="background-color:#b0c4de";> <css:内联样式>
<h1 style="color:red;">常用标签学习..</h1>
</div>
<hr/><!-- 水平线-->
<div style="background-image:url('e:/123.jpg');background-repeat:no-repeat;";><!--头部区域-->
<h1>第一个标题</h1>
<h2>第二个标题</h2>
<hr/><!-- 水平线-->
</div>
<div> <!--内容区域1-->
<p>段落一</p><br>
<p>段落二</p>
<strong>加粗文本优选strong</strong>
<br><b>相同加粗功能</b>
<br/><br/>
<em>斜体文本</em>
<br><i>斜体优选em</i>
<br /><br/>
<sub>下标</sub> 和<sup>上标</sup>
<br /><br>
<a href="http://www.runoob.com/html/html-tutorial.html"><br/><br/>www.runoob.com/html/html-tutorial.html</a>
<!--使用 target 属性，你可以定义被链接的文档在何处显示。-->
<a href="http://www.runoob.com/html/html-tutorial.html" target="_blank"><br/><br/>www.runoob.com/html/html-tutorial.html</a>
<br/><br/>
<a href="http://www.runoob.com">www.runoob.com</a>
<br/><br/>
<!--alt 属性用来为图像定义一串预备的可替换的文本。-->
<img src="http://www.runoob.com/images/pulpit.jpg" alt="这是一张图" width="100" height="100"/>
<img src="file:///E:\123.jpg" alt="这是一张图" width="100" height="100"/><br>
<img src="E:\123.jpg" alt="这是一张图" width="100" height="100"/>
</div>
<hr/>
<div> <!--左菜单区域-->
<!--无序列表-->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<!--有序列表-->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</div>
</body>
</html>内部样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单学习</title>
<style>
body {background-color:#b0c4de;}
#head{color:red;}
.content_form{background-color:red;}
</style>
</head>
<body>
<div id="head">
<h1>表单学习</h1>
<p>段落<p>
</div>
<div class="content_form">
<form>
用户名：<input type = "text" name = "test" value = "aa"><br> <!--文本标签：用户名密码输入框--> <!--aa表示默认值-->
密 码：<input type = "password" name = "123321" placeholder = "请输入用户名密码">
<!--单选标签：按钮-->
<br><!--后面的/可加可不加-->
男<input type="radio" name="sex" value="man"><br>
女<input type="radio" name="sex" value="women">
<!--多选标签：复选框--> <!--汉字这里可写前面可写后面-->
<br><input type="checkbox" name="person" value="175cm">身高<br>
<input type="checkbox" name="person" value="beatiful">型男
<!---->
<!--<input type="submit"> 定义了提交按钮.-->
<!--当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。-->
<br>用户名：<input type = "text" name = "test" placeholder = "请输入用户名">
<input type="submit" value="提交"><br><br>
<!--文件域：选择文件-->
<input type="file" name="file_name"/>
<!--提交按钮-->
<input type="submit" value="提交"><br>
详情：<br><!--文本域标签-->
<textarea rows="10" cols="30">内容：</textarea>
<!--提交按钮-->
<input type="submit" value="提交"><br>
<!--下拉选择-->
<select>
<option>java</option>
<option>andriod</option>
<option>web</option>
</select>
</form>
</div>
<div>
<!--这句话作用为：当在用户输入任意字母是，提交会自动跳转到百度去-->
<!--表单 属性action:表单处理地址 method：请求方法 http
get URL可以看到对应密码用户信息等 port作为消息体不是url可视化-->
<form name="input" action="http://www.baidu.com" method="get">
<br>用户：<input type = "text" name = "test" placeholder = "请输入用户名">
<input type="submit" value="提交">
</form>
</div>
</body>
</html>图：
外部样式表：
<html>
<head>
<meta charset="utf-8"/>
<title>表单学习</title>
<link rel="stylesheet" type="text/css" href="c1.css">
<!--<style>
body {background-color:#b0c4de;}
#head {background-color:red;}
.content_form{background-color: #20B2AA;}
</style>-->
</head>
<body>
<div id="main_container">
<div id="head">
<h1>表单学习</h1>
</div>
<div>
<a href="http://www.baidu.com"><h3>百度首页</h3></a>
<p>html学习样式学习</p>
</div>
<div>
<p>无序列表实例:</p>
<ul class="u">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCTIPT</li>
</ul>
<p>有序列表实例:</p>
<ol class="o">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</div>
<div class="content_form">
<!--表单 属性action:表单处理地址 method：请求方法 http-->
<form name="form1" action="http://www.baidu.com" method="get">
<!--文本标签-->
用户名:<input type="text" name="username" placeholder="请输入你的"/><br/>
密 码:<input type="password" name="password" value="1234"/><br/>
<!--单选标签-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女<br/>
<!--多选标签-->
<input type="checkbox" name="vehicle" value="Bike">自行车<br>
<input type="checkbox" name="vehicle" value="Car">汽车<br/><br/>
<!--文件域-->
<input type="file" name="file_name"/><br/><br/>
<!--下拉选择-->
<select>
<option>html学习</option>
<option>CSS学习</option>
<option>JavaScript学习</option>
</select><br/>
详情<br/>
<!--文本域标签-->
<textarea name="xq" rows="10" cols="30"></textarea><br/>
<br/>
<br/>
<!--提交按钮-->
<input type="submit" value="提交"/>
</form>
</div>
</div>
</body>
</html>body {background-color:#b0c4de;}
#head {background-color:red;} /*背景颜色*/
.content_form {
background-image:url('image/pulpit.jpg'); /*设置背景图片*/
background-repeat:no-repeat; /*背景图不重叠*/
background-size:100% 100%; /*背景大小 值为宽高度*/
}
#main_container {text-align:center;} /*内容居中*/
a {text-decoration:none;} /*移除鼠标下划线*/
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
p {font-size:34px;color:red;} /*设置p中字体大小，颜色*/
.u {background-color:gray;color:white;font-weight:bold }
ul.u {list-style-type: none;} /*移除列表默认圆点*/
ol.o {list-style-type: lower-alpha; }图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端－CSS id和Class选择器－002
- WEB前端 -- CSS伪类、伪元素选择器
- Web前端从入门到精通-5 css简介——css概述和选择器
- 【Web前端】CSS 选择器之 last-child 与 last-of-type
- Web 前端开发者必知的9 个 CSS 属性
- [Web前端]CSS实现“不可选择，不可复制”面临的问题
- Web前端开发：DIV+CSS网页布局总结
- 【Web前端】CSS div居中显示
- [CSS]Web前端开发之CSS工具列表 （转）
- web前端开发之Css
- Web编程前端之4：css+div多样式可定制完美分页全攻略
- [CSS]Web前端开发之CSS工具列表
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- Web 前端开发者必知的9 个 CSS 属性
- Web编程前端之4：css+div多样式可定制完美分页全攻略
- 收集Web前端 面试题 HTML+CSS部分
- Web前端开发规范文档(css/javascript)
- 分享个WEB前端CSS兼容的问题.
- Web前端学习笔记（二）——CSS中的选择符
- Web 前端开发者必知的9 个CSS属性