CSS的介绍:
css:层叠样式表
一、CSS的作用
1、以统一的方式实现样式的定义
2、提高页面样式的可重用性和可维护性
3、实现了内容(HTML)和表示(CSS)的分离
HTML和CSS之间的关系:
HTML:构建网页的结构
CSS : 构建HTML元素的样式
样式汇总:
color: 字体颜色
font-size 字体大小
font-family:字体样式
background-color 背景颜色
width:宽度
height: 高度
字体使用实例(样式)
1.font-family: 字体的种类
2.font-size: 字号
3.color: 字体的颜色
4.font-weight(100-900): 字体的粗细
{normal:普通;lighter:细;bold:宽(粗)}
5.字符间距:letter-spacing
6.字体划线:text-decoration
{overline:上划线;line-through:中划线;underline:下划线}
7.字体形状:font-style:italic(斜体)
8.行高:line-height
9.水平位置:text-align
10.首行缩进:text-indent
二、CSS的使用
1.内联样式
将样式声明在元素的style属性中
<p style="color;red(样式声明)">1</p>
样式声明 表示一个具体的显示效果,可以多个同时存在的,多个样式之间用 ; 进行隔开
每个样式声明都有两部分组成
color: 样式属性
red : 属性值
2.内部样式表
1.在head里面加上一个 style标签
<style type="text/css"></style>
2.在style中添加任意多的样式
p{
样式声明;
}
选择器:规范了页面中哪些元素能够使用定义好的样式
3.外部样式表:
创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个CSS文件 并在里面添加好样式
在需要使用得页面上添加 link 标签 进行引入
<link rel="stylesheet" type="text/css" href="css文件位置">
4.引入方式的优先级:
就近原则 谁离这个标签进 最后就是谁的样式
三、CSS样式表的特征
1、继承性:(没有被其他样式影响的情况下使用)
子级标签可以直接使用父级元素声明好的样式
(大部分的CSS样式是可以被继承)
2.层叠性:
可以同时写多个样式
3.优先级:
低: 浏览器的缺省值
中: 就近原则
高: 内联样式
4.!improtant规则:
作用: 强制调整优先级 (一定是最后显示的)
打破了优先级规则
四、CSS基础选择器
作用: 规范了页面中哪些元素能够使用定义好的样式
目的: 匹配页面元素(找到页面的元素)
1.通用选择器:(通配符选择器)
作用:匹配页面中的所有元素
用法:*{ }
2.标签选择器
作用:匹配当前所有这一类的标签
用法: 标签名{}
如:p{}
3.类选择器(类名可有多个)
作用:由css定义好,可以被任意标记的class属性值进行引用的选择器
语法:
1.在标签内 加上class属性
2.在样式表中 .类名{} 进行引入
4.ID选择器(id名称有且只有一个)
作用:针对指定ID值的元素去定义样式
语法:
在标签内加上ID属性
在样式表中 使用 #ID名{} 进行引入
注意: 类名或者ID名 不能以数字开头
除了 “_”、“ -” 以外不能有其他的特殊字符
优先级: id > class > 标签 > *
权值;
标签选择器: 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
选择器的权值加到一起,大的优先;如果权值相同,后定义的优先
五、复杂的选择器
1.群组选择器
作用:选择器声明是以 “,” 分隔的选择器列表
2.后代选择器
后代: 只要是具备层级关系的元素
使用空格 隔开
3.子代选择器
子代:只具备一级层级的关系的元素
使用 “>” 隔开
六、尺寸属性
1、作用:用户设置元素的宽度和高度 单位为px 百分比
2.宽度属性和高度属性
width 设置元素的宽
height 设置元素的高
max-width : 最大的宽度
max-height : 最大的高度
min-width : 最小的宽度
min-height: 最小的高度
3.允许被修改高度和宽度的元素
块级元素允许被设置宽高
行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
存在width和height属性的元素 可以设置宽高的样式 img table
4.溢出
使用尺寸属性限制元素大小的时候,如果内容所需要的空间太小大于元素本身,会导致溢出效果
属性:
overflow
visible:默认的效果 溢出可见
hidden: 隐藏 溢出的时候隐藏
scroll 滚动 当元素溢出的时候会出现滚动条 溢出时滚动条可用
auto 自动 内容溢出的时候会出现但是没有溢出的时候不出现
七、边框阴影
属性: box-shadow
h-shadow :水平位置
v-shadow :垂直位置
blur :模糊距离
spread :阴影尺寸
color :颜色
inset :将外阴影变成内阴影
习题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css的使用</title>
<!--引入的优先级
就近原则:谁离这个body里的标签近,最后就是谁的样式
比如外部样式表在内部样式表下面,最后显示的是外部样式表
内部样式表在外部样式表下面,最后显示的是内部样式表
内联样式表在body标签里,所以内联样式最优先显示。
-->
<!--外部样式表
1.创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个css文件。并在里面添加好样式 。
2.在需要使用的页面上添加link标签进行引入
-->
<link rel="stylesheet" type="text/css" href="css/dome1.css"/>
<!--内部样式表
在head里加上style标签
在style中加任意多的样式
选择器:规范了页面中哪些元素能够使用定义好的样式
如下方的P
-->
<style type="text/css">
p{
color: blueviolet;
}
</style>
</head>
<body>
<!--内联样式(行内样式)
将样式声明在元素的style属性中
<p style="color: chartreuse; font-size: 51px;">1</p>
样式声明:color:red;font-size:51px;
(表示一个具体的显示效果,可以多个同时存在的,多个样式之间用“ ; ” 进行隔开)
每个样式声明有两个部分组成:
如
color:样式属性
red:属性值
-->
<p style="color: chartreuse; font-size: 51px;" >1</p>
<!--CSS样式表的特征:
1.继承性:(没有被其他样式影响的情况下使用)
子级标签可以直接使用父级元素声明好的样式
(大部分的css样式是可以被继承的)
2.层叠性:
可以同时写多个样式
3.优先级:
低:浏览器的缺省值
中:就近原则
高:内联样式
4.!improtant规则
强制调整优先级
-->
<div style="color: darkgray; font-size: 79px;">
<p>2</p>
</div>
<p>