CSS 基本概念
CSS 全称 Cascading Style Sheets，缩写为 CSS。
CSS（层叠样式表）用于设置网页的样式及布局。比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其他装饰性的特征。
元素样式的来源主要有三种：
用户代理样式：浏览器为用户预定的默认样式自定义样式：程序员自己写的样式，这是我们要学习的继承样式：继承自父元素的样式1，语法格式
选择器{属性名:属性值;属性名:属性值;……}其中：
选择器（Selector）用于选择出一部分元素进行样式设置。样式由一组属性进行设置，属性名和属性值有特定的含义。属性名和属软件开发定制mhkj33性值之间用冒号:（英文标点）分隔。每条属性声明结尾加分号;（英文标点）作为结束标记。2，添加方式
CSS 样式的添加方式分为内联样式、内部样式和外部样式。不同添加方式的位置不同，作用范围不同，优先级也不同。
内联样式（行内样式）
行内样式是用 style 属性将样式添加到标签内部，只对当前元素起作用。格式如下：
<标签名 style = “属性名:属性值; 属性名:属性值; ……”>示例：
<pstyle=“font–size:12px;color: blue;font–weight: bold“> 行内样式</p><!– 将当前<p>元素的文本设置为12像素大小、蓝色、加粗 –>内部样式（内嵌样软件开发定制mhkj33式、文档样式）
内部样式用<style>标签将样式添加到 HTML 文档的 <head>标签内部，这里的样式只对当前页面起作用。
示例：
<head> ……<style> p{ font–size:12px; color: blue; font–weight: bold“ }</style></head><!– 将当前页面中所有的<p>元素的文本设置为12像素大小、蓝色、加粗 –>外部样式
如果需要将多个页面统一设置公共的样式，则应将样式定义在单独的样式文件中（ .css 文件），然后再相关页面中引用这个文件。
样式文件示例（common.css）：
p{ font–size:12px; color: blue;f软件开发定制mhkj33ont–weight: bold;}a{ text–decoration: none;}……在需要设置样式的页面中<head>标签内使用<link>引用外部样式：
<head> ……<linkrel=“stylesheet”href=“common.css”></head>选择器
CSS 选择器大致可以分为类型选择器、属性选择器、关系选择器、伪类和伪元素、层叠与继承等。
1，类型选择器
类型选择器有时也叫做“标签选择器”或者是”元素选择器“，选择器的名称就是标签名称。
h1{ color:red;}/* 所有的<h1>元素 */类型选择器中有个特殊的选择器：全局选择器，名称为*，作用于所有的元素。软件开发定制mhkj33
*{ margin:0; padding:0;}/* 所有的元素 */2，属性选择器
属性选择器用于帅选出属性符合条件的元素，格式为：
元素标签名[属性条件]例如：
a[target]{ background–color: yellow;}/* 含有 target 属性的<a>元素 */元素标签名可以不写，此时表示所有符合属性条件的元素：
[class=“myColor”]{ color: red;}/* class 属性值为 “myColor”的所有元素 */不同属性条件的列表：
属性选择器<br />（E为元素标签名，foo为属性名） 说明 E[foo] 软件开发定制mhkj33 含有foo属性的E元素 E[foo=”bar”] 属性foo的值为bar的元素 E[foo~=”bar”] 属性foo的值按空格分开后的单词列表中包含bar的元素 E[foo^=”bar”] 属性foo的值以bar开头的元素 E[foo$=”bar”] 属性foo的值以为bar结尾的元素 E[foo*=”bar”] 软件开发定制mhkj33 属性foo的值包含bar的元素属性中的 id（ID）和 class（类）因为高频使用，有专用的简便用法：
ID 选择器
以#开头：
#center{ text–align:center;}/* ID 属性值为 center 的元素 *//* 等同于 [id=”center”] */p#center{ text–align:center;}/* ID 属性值为 center 的 <p> 元素 *//* 等同于 p[id=”center”] */类选择器
以.开头
.big{ font–size:20px;}/* class 属性值为 big 的元素 *//* 等同于 [class=”big”] */p.cen软件开发定制mhkj33ter{ font–size:20px;}/* class 属性值为 big 的 <p> 元素 *//* 等同于 p[class=”big”] */.big.center{ font–size:20px;}/* 多类选择器，中间不能有空格 *//* class 属性同时拥有 big 和 center 两个属性值的元素 */3，关系选择器
子元素选择器
用>连接两个元素，表示其直接子元素：
<style> div>p{ color:blue;}/* div 的直接子元素 p */</style><div><p>直接子元素，可以被选择</p><article><p>不是直接子元素，不能被选择</p></arti软件开发定制mhkj33cle></div>后代选择器
用空格连接两个元素，表示其内的子元素，包含孙元素、重孙元素……：
<style> div p{ color:blue;}/* div 的后代元素 p */</style><div><p>直接子元素，可以被选择</p><article><p>不是直接子元素，也能被选择</p></article></div>相邻兄弟选择器
用+连接两个元素，表示紧跟其后的（第一个）兄弟元素：
<style> h2+p{font–weight:bold;}</style><h2>第一个标题</h2><p>第一个标题下的第一个段落</p><!– 被选中，粗体显示 –><p>第一个标题下的第二个段软件开发定制mhkj33落</p><!– 不能被选中 –><h2>第二个标题</h2><p>第二个标题下的第一个段落</p><!– 被选中，粗体显示 –><p>第二个标题下的第二个段落</p><!– 不能被选中 –>同级选择器（通用兄弟选择器）
用~连接两个元素，表示选中一个元素的兄弟元素，即使它们不直接相邻：
<style>.first~.item{background: green;}/* 这里的.item可以用通配符*代替，可以减轻选择器权重 */</style><ulclass=“list”><liclass=“item first”>item1</li><liclass=“item second”>i软件开发定制mhkj33tem2</li><!– 被选中，绿色底 –><liclass=“item third”>item3</li><!– 被选中，绿色底 –></ul> <style>.first~.third{background: green;}</style><ulclass=“list”><liclass=“item first”>item1</li><liclass=“item second”>item2</li><liclass=“item third”>item3</li><!– 被选中，绿色底 –></ul>
会员专属
暂无评论内容