1. css概述
1. 问题
先带着问题学习css:
- 设置页面中所有的文本颜色为红色。
- 设置页面中所有的p元素文本为蓝色。
- 设置页面中所有的h3元素文本也为蓝色。
- 将页面中所有的p元素文本颜色改为绿色。
HTML的不足:
1. 不同的标记想完成相同的效果使用的是不同
...
<body text="red"> 修改文本颜色
<font color="blue"> 修改文本颜色
2. 样式效果不通用
css作用:
1. 以统一的方式实现样式的定义
color:red;
2. 提高页面样式的可重用性和可维性
2. 什么是css
简介:CSS(Cascading Style Sheets)
层叠样式表,级联样式表, 简称 样式表
实现了内容(HTML)与表现(CSS)的分离
3. CSS 与 HTML 之间的关系
HTML是构建网页的结构
css是构建HTML元素样式
4. HTML属性与CSS样式的使用原则
ex(例子):
html : 修改文本颜色
css : color:red; 修改文本颜色
w3c: 建议尽量使用css样式取代HTML属性
<td colspan="3">
colspan属性在css中没有方式能够取代,所以针对跨列来讲,
只能使用 HTML1 元素属性,不能使用css属性
2.css语法
1. 使用css样式表
分为:
- 内联方式
- 内部样式表
- 外部样式表
1. 内联方式
内联方式介绍:将样式声明在元素的style属性中
语法:
<ANY style=“样式声明;> 样式声明”</ANY>
样式声明: 表示一个具体显示效果,多个样式声明之间,用;隔开
每个样式声明都由两部分组成:
样式属性; 属性值
ex(例子):
样式属性: 属性值
color 颜色英文表示法
font-size 以px或pt为单位的数值
background-color 颜色英文表示法
设置某元素的 文本颜色为红色, 文字大小为24px,背景颜色为绿色 :
<ANY style="color:red;font-size:24px;background-color:gree;"></ANY>
2. 内部样式表
内部样式表介绍:将样式声明定义在页面的style 元素中
-
在<head>中添加<style></style>元素
2. 在style中添加任意多“样式规则”
样式规则:
选择器{
样式声明;/* 属性:值; */
样式声明;
… …
}选择器: 规范了页面中哪些元素能够使用定义好的样式。
ex(例子):
p{
color:red;
font-size:48px;
background-color:green;
}
p{}: 定义页面中所有p元素的样式
命令例子显示:
显示例子:
3. 外部样式表
步骤:
-
创建一个单独的样式表文件保存样式规则
**.css
只能编写遵循css规范的内容-
在需要的页面上引入样式表文件
<head> <link rel="stylesheet" href="css文件 url"> </head>
-
(例子1) 文本颜色为红色,文字大小:24px:
命令显示例子:
显示例子:
2. css样式特征
1. 继承性
子级元素可以直接使用父级元素声明好的样式
大部分的css样式属性是可以被继承的。
2. 层叠性
可以为一个元素声明多个样式规则中的样式如果样式不冲突的话
,多个样式规则中的样式可以层叠为一个。
3. 优先级
样式定义冲突时,按照不同样式使用的“优先级”来应用样式
浏览器缺省设置爱(User Agent Stylesheet)中:
外部样式表或内部样式表
就近原则-谁离元素近,就用谁高:内联样式
4. !important 规则
作用: 显示调整样式的优先级
语法:
属性名称: 值 !important;
(尽量少用)
IE以及以下浏览器不支持
打破默认优先级规则
2. css基础选择器
1. 它的作用:
规范了页面中哪些元素能够使用定义好的样式
目的: 匹配页面元素
2. 详解:
1. 通用选择器
作用: 匹配页面中所有的元素
语法:
*{样式声明;}
缺点: 效率较低,尽可能少用
2. 元素选择器
作用:定义页面某一标签的默认样式
语法:
元素{
样式声明;
}
3. 类选择器
作用:
由css定义好,可以被任意标记的class属性值进行引用的选择器
语法:
.类名{样式声明;}
类名:
- 不能以数字开始
2. 除_,-意外不能有其它特殊符号
引用:
<ANY class=“类名”>
引用方式 - 多类选择器的引用
可以将多个类选择器,同时应用在一个元素中
语法: <ANY class=“class1 class2 class3”>
练习:
span元素的背景颜色为灰色(gray),
文本颜色为绿色(green), div文字显示为橘黄色,文字加粗显示。
p、h3 文本颜色为红色。
解析:
显示命令例子:
实例演示: