1.7_CSS基础
层叠样式表 (Cascading Style Sheets)
CSS产生缘由
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。 由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
CSS作用
样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
- 选择器通常是您需要改变样式的 HTML 元素。
- 每条声明由一个属性和一个值组成。
- 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
例子:
将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
h1 {color:red; font-size:14px;}
Css外部样式引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
更多css内容请参考
http://www.w3school.com.cn/css/index.asp
示例:
<html> <hand> <title>我要自学网</title> <!--引入Css样式--> <link rel="stylesheet" type="text/css" href="CssTest.css"> </hand> <!--设置style样式--> <body style="background-color:#C1FFC1"><!--颜色可参照RGB颜色表--> <!---注释--> <!--图片标签--> <img src="D:\学习\selenium自动化测试\课程素材\sc1\代码\Logo.png" width=200 high="100"> <!--标题标签--> <h1>自学网口号</h1> <h2>自学网口号</h2> <!--段落标签--> <!--<br/>是换行标签--> <!--style属性,字体,字体颜色,字体大小,文本对齐方式,多个属性用分号;间隔--> <p style="font-family:隶书;color:red;font-size:30;text-align:center">自学成才,<br/>快速成功</p> <p>增加收入,改变命运</p> <p>这是一个神奇的网站,你值得拥有</p> <!--超链接标签--> <a href="http://www.baidu.com">百度一下</a> <div style="background-color:yellow;height:200;width:200"> <p>这是一个div区域,分区,节</p> <a href="http://www.w3school.com.cn/tags/index.asp">更多标签</a> <a href="http://www.w3school.com.cn/tags/html_ref_standardattributes.asp">更多属性</a> </div> </body> </html>
CssTest.css代码:
p {color:red;font-size:40}/*针对段落的样式*/ h1 {color:green}/*针对标题1的样式*/