【CSS】CSS-三种样式+样式选择器+属性

body { font-family: Verdana, sans-serif ; }
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body） 所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不 需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子 元素的子元素也一样。
文本
12
Part4 CSS样式
样式 表格边框 表格 折叠边框 文本对齐 宽度和高度 分类 border border-collapse：collapse text-align width，height 属性
13Baidu Nhomakorabea
Part4 CSS样式
背景样式：用于设置背景的一系列css属性
14
Part4 CSS样式
第二阶段-Web
第5课 CSS基础
Part 1 Part 2 CSS概述 CSS基础语法，继承 CSS选择器：元素，分组，id，伪类，伪元素，属 性，派生，后代，子元素，相邻兄弟 样式属性：背景，文本，字体，链接，表格 定位：普通流，相对定位，绝对定位，浮动
Part 3
Part 4 Part 5
2
匹配有href属性的a标签元素 匹配有href和title属性的a标签 元素 a[href=‘www.baidu.com’]{colo 匹配href属性值为百度的a标签 r:red;} 元素 a[href~=‘baidu’]{color:red;} 匹配href属性值包含baidu整词 的 a[href|=‘www’]{color:red;} 匹配href属性值以www整词开 头的 a[href^=‘www’]{color:red;} 匹配href属性值以www开头的 a[href$=‘com’]{color:red;} 匹配href属性值以com结尾的 a[href*=‘www’]{color:red;} 匹配href属性值包含www的 10
16
Part4 CSS样式
background-repeat 属性设置是否及如何重复背景图像 body{background-repeat: repeat-y;}
17
Part4 CSS样式
Border属性设置表格边框
table, th, td { border : 1px solid blue ; } 边框颜色 边框类型 边框粗细
ID选择器
8
Part3 CSS选择器
选择器 类选择器 示例 <h1 class="important"> This is very important. </h1> .important {color:red;} <h1 class=“important big”>This is very important.</h1> .big{font-size:48px;} 说明 .类名，类名前面加上点号 类选择器选中HTML所有class 属性值匹配的元素 多类选择：在html元素的class 中，可以填写多个类名，用空格 分隔，那么将在该元素上层叠显 示这些类的样式
3
Part1 CSS概述
CSS 样式的三种使用方式 • 在html元素的style属性中定义，不需要选择器，只对该元素有效 • 在html中使用<style>标签，需要使用选择器，只对该html文档有 效。 • 在html中使用<link>标签，连接外部css文件，需要使用选择器，该 css文件可被多个html共同连接
伪类选择器
a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} input:focus{border：1px;} ul:first-child{color:red;}
15
Part4 CSS样式
background-image 属性为元素设置背景图像
body { background-image: url(bgimage.gif);}
background-position 属性设置背景图像的位置
body{background-position:center;} top，bottom，left，right，center body{background-position: 30% 20%;} 左上0%，0%，右下100%,100% body{background-position: 50px 100px;} 左上0,0,
7
Part3 CSS选择器
选择器 示例 说明
元素选择器
选择器分组
html {color:black;}
文档的元素就是最基本的选择器
/* 不分组*/ 将任意多个选择器分组在一起， h1 {color:blue;} h2 {color:blue;} 选择器之间用逗号分隔 h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* 分组 */ h1, h2, h3, h4, h5, h6 {color:blue;} <h1 id="intro”>this is intro</h1> #intro { font-weight:bold; } #元素ID值，来选择HTML中某 个指定的元素 因为是ID，所以可以在所属 HTML中唯一确定一个元素 注意ID值大小写敏感
样式 背景颜色 背景 背景图像 分类 属性 background-color background-image
背景重复
背景定位 文本颜色 文本大小 文本字体 文本缩进 水平对齐
background-repeat
background-position color font-size font-family text-indent text-align
18
Part4 CSS样式
Border属性设置表格边框
19
Part4 CSS样式
做一个漂亮点的表格
20
Thanks
你可以自由分发此PPT，但不得用 于商业用途。 转发请保留此版权信息。
谢钟扬 1137409632 antonio_xie@163.com
未访问的链接 已访问的链接 鼠标移动到链接上 选定的链接 拥有键盘输入焦点的元素 元素的第一个子元素
9
Part3 CSS选择器
选择器 示例 说明 :first-letter，第一个字符 :first-line，第一行 :before，之前 :after，之后 伪元素选择器 p:first-letter { color:#ff0000;} p:first-line { color:#ff0000; } h1:before { content:url(beep.wav); } h1:after { content:url(beep.wav); } 属性选择器 a[href] {color:red;} a[href][title] {color:red;}
Part1 CSS概述
CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素 • 样式通常存储在样式表中 • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 • 外部样式表可以极大提高工作效率 • 外部样式表通常存储在 CSS 文件中 • 多个样式定义可层叠为一
那么，这三种方式共同使用时，如何层叠？
4
Part1 CSS概述
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、 <p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、 “这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来 完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断 地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越 来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化 联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出 样式（Style）。所有的主流浏览器均支持层叠样式表。
Part3 CSS选择器
选择器 后代选择器 子元素选择器
示例 h1 em {color:red;} h1 > strong {color:red;}
说明 h1中的em元素 h1中直接的strong元素 紧接在h1后的p元素
相邻兄弟选择器 h1 + p {margin-top:50px;}
11
Part4 CSS样式
5
Part2 CSS基础语法，继承
CSS 的基本构成
selector { property : value ; …… }
属性 属性值
属性
属性值
h1
选择器
{ color : red ; font-size : 14px; }
样式声明 样式声明
6
Part2 CSS基础语法，继承
CSS 的继承：子元素从父元素继承属性
background属性将背景属性设置在一个声明中 body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } background-attachment属性设置背景图像的滚动 body { background-image: url(bgimage.gif); background-attachment: fixed; } background-color属性设置元素的背景颜色 body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); }