1,什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
2、CSS的作用
1、以统一的方式实现样式的定义
2、提高页面样式的可重用性和可维护性
3、实现了内容(HTML)和表示(CSS)的分离
HTML和CSS之间有什么关系?
HTML:构建网页的结构
CSS :构建HTML元素的样式
3,样式表分类
样式表又分为
外部样式表(External style sheet)
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
内部样式表(Internal style sheet)
当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用
内联样式(Inline style)
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
这是一个段落。
样式汇总:
color:red 字体颜色
font-size 字体大小
font-family:字体样式
background-color 背景颜色
width:宽度
height: 高度
字体使用实例(样式)
font-family 字体的种类
font-size 字号
color 字体的颜色
font-weigh 字体的粗细
*CSS样式表的特征*
1、继承性
子级标签可以直接使用父级元素声明好的样式 (大部分的CSS样式是可以被继承)
2.层叠性
可以同时写多个样式
3.优先级
低: 浏览器的缺省值
中: 就近原则
高: 内联样式
4.!improtant规则
作用: 强制调整优先级 (一定是最后显示的)
打破了优先级规则
四、CSS基础选择器
作用: 规范了页面中哪些元素能够使用定义好的样式
目的: 匹配页面元素(找到页面的元素)
1.通用选择器
作用:匹配页面中的所有元素
用法:*{}
标题为红色
段落也为红色
2.ID 选择器
(ID selector,IS):使用 # 标识selector,语法格式:#S{…}(S为选择器名)
red text
3.类选择器
<p class="value">center text</p>
4.标签选择器(element selector,ES):又叫标签选择器,
<p style="font-style:italic">italic text</p>
5.后代选择器
(brother selector,BS):
<style>
div p{
color:red;
}
</style>
<div>
<p>no red text</p>
<div>no red text</div>
<p>red text</p>
</div>
6.子代选择器(sub-selector,SS):类似于PS,指定目标选择器必须处在某个选择器对应的元素内部,两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式,而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签,语法格式:A>B{…}(A、B为HTML元素/标签)。
red text
<tr>
<td>
<p>no red text;</p>
</td>
</tr>
</div>
7.群组选择器
作用:选择器声明式以 , 分割 的选择器列表
选择器优先级: id > class > p(标签)> *
权值;
标签选择器: 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
五、尺寸属性
1、作用:用户设置元素的宽度和高度 单位为px 百分比
2.宽度属性和高度属性
width height 设置元素的宽高
max-width max-height 最大的宽度 和 最大的高度
min-width min-height 最小的宽度 和 最小的高度
3.允许被修改高度和宽度的元素
1.块级元素允许被设置宽高
2.行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
3.存在width和height属性的元素 可以设置宽高的样式 img table
4.溢出
使用尺寸属性限制元素大小的时候,如果内容所需要的空间太小大于元素本身,会导致溢出效果
属性:
overflow
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
六、边框阴影
属性: box-shadow
h-shadow :水平位置 必需的。水平阴影的位置。允许负值
v-shadow :垂直位置 必需的。垂直阴影的位置。允许负值
blur :模糊距离 可选。模糊距离
spread :阴影尺寸 可选。阴影的大小
color :颜色 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset :将外阴影变成内阴影 可选。从外层的阴影(开始时)改变阴影内侧阴影
box-shadow: h-shadow v-shadow blur spread color inset;