CSS(Cascading Style Sheets) 层叠式样式表,又称级联式样式表 ,简称样式表。
HTML与CSS之间的关系:
。HTML 用于构建 网页结构
。CSS用于构建HTML元素样式
。HTML是页面的内容组成,CSS是页面的变现,表现与内容分离
1, 使用css样式表的方式(优先级:离得越近优先级越高)
内联方式:样式定义在单个HTML中
内部 样式:样式定义在HTML页头的元素中
外部样式:(大项目使用的多)将样式定义在一个外部CSS文件中,(.css 文件)
内部样式:
。样式表规则位于文档头元素中,元素内,包括:
{1,在文档<head>元素内添加<style>元素,2,在<style>元素中添加样式规则,文本框中(输入框input)加样式 border(边框) solid(实心) black(黑色) 写法如下:border: 5px solid black;
外部样式1:(大项目使用的多)创建一个单独的样式文件 用来保存样式规则
。一个纯文本文件,文件后缀 .css
。该文件只能包含样式规则
。样式规则由选择器和样式声明组成
导入 外部样式表 使用 link
外部样式2:在需要使用该样式表文件的页面上,使用link元素添加link元素---
<link rel="stylesheet" type="text/css" href="css文件地址">
3
2 , CSS语法总则:
特征如下;
继承性:
层叠性:可以定义多个样式,
优先级:就近原则,最后一次有效。如下;
。浏览器
。外部样式表或者内部样式表— 就近优先
。内联样式(优先级从上到下由低到高)
css语法规范总结
1,内联式:由样式声明组成
<h1 style="background-color;silver;color:red">文本</h1>
2,样式表(内部样式表或者外部样式表)
由多个样式规则组成,每个样式规则有两个部分:选择器+样式声明
3,!important 表示样式的优先级最高
选择器 {属性:属性值 !important}
3,css基础选择器
通用选择器显示为一个*
外边距:margin(两个空间之间的距离包括上下左右 margin-right/left/top/bottom)
内边距;padding(上下左右都一样)
字体:font-family 字体要默认浏览器有的
font-size 设置字号 单位可以是 px 或pt
元素选择器:
示例 css5-4.html
类选择器:1
类名称不能以数字开头 语法为 .className
写文本框时,要居中文字是 将height: 50px;
line-height: 50px;的之设成一样
class里面可以加多个样式
类选择器:2
(元素选择器) .className
id选择器:
群组选择器;用逗号隔开
后代选择器; 用空格隔开
子类选择器: 外 内 用空格隔开
子元素选择器:和主元素爱的最近的哪一个子元素列如:div>span 大于符号表示子元素