课堂笔记css

摘要

1、css概述
1、html 控制样式的弊端
1、相同的样式效果,通过不同的属性 来完成的


2、程序 可维护性 不高
2、通过 CSS 解决上述问题
可以让 各个元素 都使用统一的 样式声明 从而提高程序的可重用性和可为维护性

课堂笔记css

1、css概述
1、html 控制样式的弊端
1、相同的样式效果,通过不同的属性 来完成的
<body text="">
<font color="">
2、程序 可维护性 不高
2、通过 CSS 解决上述问题
可以让 各个元素 都使用统一的 样式声明 从而提高程序的可重用性和可为维护性

3、什么是CSS
CSS :Cascading Style Sheet ,层叠样式表、级联样式表,简称为 样式表

作用:为 html 元素 去定义样式
能够实现 内容与表现相分离
提高程序的可重用性 和 可维护性
重用性:可以让多个元素 使用相同的样式
维护性:一个元素的样式改变,其他元素也可以跟着变
4、HTML 与 CSS 之间的关系
HTML 主要负责显示内容
CSS 主要负责样式的定义
一个完整的页面 = HTML + CSS

W3C建议尽量使用CSS样式 取代 HTML 属性
5、CSS样式表的使用
1、使用方式
1、内联方式
也称为 :内联样式 、行内样式
将样式定义在HTML元素中
特点:只能控制某一个元素的显示效果
语法:<标记 style="样式属性:值;样式属性:值;"></标记>
常用属性:
color : 文本颜色,取值 表示颜色的英文单词
style="color:red;"

background-color : 背景颜色
style="background-color:green;"
style="color:red;background-color:green;"

font-size : 字体大小,取值 以px为单位
style="font-size:20px"
2、内部样式表
将所有的样式内容 放在 <head></head>中的 <style></style>元素内
<style></style>中 添加 若干 "样式规则"
样式规则:对一套 样式的 完整描述,主要包含两部分
1、哪些标记允许使用定义好的样式 - 选择器
2、样式内容 - 若干样式声明

样式规则语法:
选择器{
//样式声明
样式属性:值;
样式属性:值;
...........
}

选择器:通过 标记 的名称来表示选择器,相当于定义该标记的样式
div{
color:red;
background-color:green;
font-size:48px;
}

p{
color:blue;
font-size:24px;
}
特点:
1、能够实现 内容与表现相分离
2、提升了 样式的可重用性和可维护性
3、只能在一个页面中做通用样式定义
3、外部样式表
将样式规则 保存在独立的 样式文件中,由页面对样式文件进行引用
特点:
1、实现 内容与表现相分离
2、将可重用性 和 可维护性 体现的 最完美(所有的页面都能用)
3、可以在整个网站乃至于互联网中做通用的样式定义
步骤:
1、创建一个 样式表文件
纯文本文件,以 .css 结尾

该文件中,只能包含样式规则
2、在页面中,对样式表文件进行引用
在 <head></head>中 增加以下代码
<link rel="stylesheet" type="text/css" href="链接的css文件地址" />
2、CSS语法规范
1、基本语法
样式声明: 属性:值;
样式规则: 选择器 和 样式声明
2、CSS样式表特征
1、继承性
大部分的CSS样式属性,是可以被继承的

继承:子级不用单独定义样式,可以直接父级的东西
2、层叠性
为一个元素定义多个样式的时候
样式不冲突时,多个样式表中的样式可以层叠(合并)为一个
3、优先级
样式冲突时,按照不同样式规则的优先级来应用样式

优先级:
1、浏览器默认设置 (User Agent Style) ,级别最低
2、内部样式表 或 外部样式表,级别 处于中间位置
就近原则
3、内联样式 ,级别 最高
Unknown property name : 样式属性名称写错了
Invalid property value : 样式属性值写错了
4、!important规则

可以通过 !important 显示调整样式优先级,!important优先级最高
语法: 样式属性:属性值 !important;

谨慎使用

3、CSS基础选择器
1、选择器的作用
规范了页面中的 哪些元素 能够使用定义好的样式
p{
color:red;
}
div{
font-size:12px;
}
2、选择器(重点)
1、通用选择器
作用:匹配页面中所有的元素
语法:*
eg:
*{
font-size:12px;
}
在页面会会匹配多次

body{
font-size:12px;
}
在页面上只匹配一次,其余都是继承,效率较高

注意:能不用就不用
2、元素选择器
作用:定义/修改特定 "标记" 的默认样式
语法:标记名称作为选择器
别名:标签选择器、标签样式
eg:
div{
....
}
p{
....
}
ul{
....
}
3、类选择器
作用:定义公共样式,可以由其他标记灵活引用
语法:.className
使用:通过标签的class属性对className进行引用
别名:类样式
注意:
1、className 不能以数字开头
2、如果一个标记向同时引用多个类的话,中间用 空格 区分
eg:
.redBack{
background-color:red;
}

<div class="redBack"></div>
<div></div>

4、类选择器 - 分类选择器
作用:将类选择器 和 元素选择器结合到一起,从而实现对某种元素中不同样式的细分控制,其目的是缩小范围
语法:元素选择器.类选择器{}
eg:
.redBack{background-color:red;}
div.redBack{background-color:pink;}
5、id选择器
作用:匹配 页面中指定id值得元素的样式
.bea{
background-color:blue;
color:red;
}

<div id="menu" class="bea"> </div>
语法:#idValue{}
eg:
#menu{
color:red;
background-color:blue;
}

<div> id="menu">...</div>
6、群组选择器
以 , 隔开的选择器列表
作用:定义一组选择器的公共样式
语法:选择器1,选择器2,选择器3 ...{}
eg:
div,p,span,#menu,.big{
font-size:24px;
}
7、后代选择器
通过标签的 上下文关系(父子级关系) 来声明定义样式
爹的儿子 可以称为 子代 或 后代
爹的孙子以及以下辈分 只能叫 后代
语法:选择器1 选择器2{}
eg:
/*所有 div 元素 里 所有的p元素*/
div p{

}
/*id为message的元素 里 所有的 p元素 */
#message p{

}

#message .important{

}
注意:不强调层级关系
8、子代选择器
要求选择器之间只能存在 父子关系
语法:选择器1>选择器2
注意:子代选择器,只向下找一级,多了不管
eg:
/*匹配 id 为message 元素 下一级的 所有div元素*/
#message>div{

}
/*匹配 id 为 message 的元素中 下一级 class为 important的元素中 下一级的 div 元素*/
#message>.important>div{

}
9、伪类选择器
1、作用:匹配元素 不同的状态
2、伪类选择器 分类
1、链接伪类
2、动态伪类

3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
3、语法规范
:伪类选择器{}

1、链接伪类
:link 匹配 尚未访问的 超链接
:visited 匹配 访问过的 超链接
2、动态伪类
:hover 匹配 鼠标悬停在 html元素上的状态
:active 匹配 元素被激活时的状态
:focus 匹配 元素获取 焦点时的状态(text,password)
注意:
对于超链接的伪类设置 ,一般情况下只设置 两种选择器即可
1、该标记的默认样式
2、鼠标移入到该标记的样式
3、选择器优先级
选择器 权值
标签选择器 1
类选择器 10
伪类选择器 10
ID选择器 100
内联样式 1000

如果选择器冲突的时候, 最终以 权值相加 大者为主

3、尺寸与边框
1、单位
2、尺寸
多表示 元素的宽和高,取值为数字,单位为 px 或 %
1、宽度
属性:width

min-width
max-width
2、高度
属性:height

min-height
max-height
3、溢出
设置元素尺寸时,并且 元素中的内容 的所占空间超出元素本身的话,会导致内容溢出。
属性:overflow
overflow-x : 横向溢出处理
overflow-y : 纵向溢出处理
取值:
1、visible
默认值,溢出可见
2、hidden
隐藏
3、scroll
滚动条,在元素中增加滚动条,溢出时可用,不溢出,则不可用
4、auto
自动,溢出时显示滚动条,不溢出是不显示滚动条

注意:
1、块级元素 允许设置 尺寸属性
2、具备 width height 属性的 html 元素
img,table,input
3、行内元素 不允许设置 尺寸属性2016/3/102016/3/10
3、边框
1、边框
1、简写方式
border:width style color;
width:边框线条的尺寸,值越大越明显 ,以px为单位
style:边框线条样式,取值:solid(实线),dotted(虚线),dashed(虚线)
color:颜色,
该属性 设置 四个边框的 宽度 样式 颜色
2、单边定义
border-left/right/top/bottom:width style color;

border-方向:width style color;
方向:left/right/top/bottom
3、单属性定义
border-width:四条边宽度
border-style:四条边样式
border-color:四条边颜色
4、单边单属性
border-方向-属性 :
方向:top/bottom/left/right
属性:width/style/color
注意:
1、边框颜色 ,可取值为 transparent(透明)

边框的组成 是由 四个 三角形 或 梯形组成的
2、边框倒角
圆角矩形
属性:border-radius
取值:以px为单位的数字 或 %

单独定义:
border-top-left-radius:左上
border-top-right-radius:右上
border-bottom-left-radius:左下
border-bottom-right-radius:右下
3、边框阴影
属性:box-shadow
取值:由多个值组成的值列表
box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:阴影水平投射距离,值为正 向右偏,值为负 向左偏(必须)
v-shadow:阴影垂直投射距离,值为正 向下偏,值为负 向上偏(必须)
blur : 可选 ,模糊距离
spread : 可选,阴影尺寸
color :可选,颜色
inset :可选,将默认的外部阴影 改为 内部阴影

常用场合:模拟边框发光效果
box-shadow:0px 0px 1px color;
4、轮廓
绘制于元素边框之外的一条线
属性:outline
取值:width style color;

outline:width style color;

outline:0px;
outline:none;

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: