css

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽而实现美化HTML⽹页。
样式通常存储在样式表中，⽬目的也是为了了解决内容与表现分离的问题
外部样式表(CSS⽂文件)可以极⼤大提⾼高⼯工作效率
多个样式定义可层叠为⼀一，后者可以覆盖前者样式

 

引入样式的三种方式：
1. 内部样式：在head内部应用
格式：<style type=”text/css”>选择器 { 属性：属性值； }</style>
2. 外部样式：
新建一个css后缀的文件并保存到网站对应目录
将style中的内容，全部剪切到css文件中；
将新建的css文件与html文件关联起来，右键-css样式-附加样式表。（注意检查图片路径）
3. 行内样式（内联样式）：
<div style=”属性：属性值”></div>

css中常见的文本样式

 

 

CSS元素显现方式

如：<p></p> <div></div>
特点：a.独占一行
b.高度 宽度 外边距 内边距可以设置
c.宽度默认与父亲宽度相等
d. 块元素里可放块元素 行内元素 行内块元素
注意：文字类元素（标签）不能放块元素
（如<h3></h3> <p></p>）

CSS三大特性
（1）层叠性

当某个盒子被多个选择器设定样式

若样式相同，则会体现层叠性，后来者居上
若样式不同，不层叠
（2）继承性

子元素会继承父元素的某些样式（尤其是文字类样式）
应用：行高的继承性
通常给body标签设置行高，然后其子元素都不用设置行高，直接继承
body {font:12px/1.5 'Microsoft Yahei' }
1.5即行高为当前字体大小的1.5倍 ，1.5可加/不加单位
（3）优先性（与权重有关）

当同一元素被多个不同选择器设置相同样式时会有优先执行哪一个选择器的问题
如<div class="box">我是盒子</div>
div {color="pink"}
.box {color="red"}
结果它是红色的 因为类选择器权重大于标签选择器

 

 

选择器
(1)作用：选择标签（要美化的对象）

（2）分类：简单选择器和复合选择器

简单选择器
a.标签选择器：作用：将一类标签都选出来
如： div {color: pink;} 将所以盒子标签的文字都设置为pink

b.类选择器：
作用：选择其中一个或几个标签
语法： .+类名 {–}
对应标签添加属性 class=“类名”（使其对应起来）
多类名：一个标签可设置多个类名（多对应）

c. id选择器（和类选择器很像，只是只能调用一次）
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
语法： #名字 {} 调用：添加属性 id=“名字”
#box {} <div id="box"></div>

d.通配符选择器
作用：对页面中所有元素设置样式
语法：* {}