前端学习-CSS-01

来源：互联网发布：星图数据 2017双十一编辑：程序博客网时间：2024/06/15 17:59

1、css概述

1、html控制样式的弊端

1、相同的样式效果，通过不同的属性来完成的

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>元素内

样式规则：对一套样式的完整描述,主要包含两部分

1、哪些标记允许使用定义好的样式 -选择器

2、样式内容 -若干样式声明

样式规则语法：

选择器{

//样式声明

样式属性:值;

...........

}

选择器：通过标记的名称来表示选择器，相当于定义该标记的样式

div{

color:red;

background-color:green;

font-size:48px;

}

color:blue;

font-size:24px;

}

特点：

1、能够实现内容与表现相分离

2、提升了样式的可重用性和可维护性

3、只能在一个页面中做通用样式定义

3、外部样式表

将样式规则保存在独立的样式文件中，由页面对样式文件进行引用

特点：

1、实现内容与表现相分离

2、将可重用性和可维护性体现的最完美(所有的页面都能用)

3、可以在整个网站乃至于互联网中做通用的样式定义

步骤：

1、创建一个样式表文件纯文本文件，以 .css结尾

该文件中，只能包含样式规则

2、在页面中，对样式表文件进行引用

在 <head></head>中增加以下代码

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、选择器的作用

规范了页面中的哪些元素能够使用定义好的样式

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; }

4、类选择器 -分类选择器

作用：将类选择器和元素选择器结合到一起，从而实现对某种元素中不同样式的细分控制,其目的是缩小范围

语法：元素选择器.类选择器{}

eg:

.redBack{background-color:red;}

div.redBack{background-color:pink;}

5、id选择器

作用：匹配页面中指定id值得元素的样式

.bea{

background-color:blue;

color:red;

}

语法：#idValue{}

eg:

#menu{

color:red;

background-color:blue;

}

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;

*******************************************************************************

阅读全文

0 0