CSS
2020-05-27 本文已影响0人
RayRaymond
简介
- cascading style sheet ：层叠样式表
- 为什么用：
- css弥补了html语言的不足 css具有更多的渲染功能
- 方便维护（html专门搭建结构、css专门渲染样式）
选择符{
属性1：属性值;
属性2：属性值1 属性值2 属性值3;
}
- css声明必须放在花括号里面
- 属性和属性值之间用 冒号 连接
- 每一条声明的结尾用分号
- 如果一个属性有多个属性值的时候，属性值与属性值之间用空格隔开。
样式表
内部样式表
-
创建：
<style type="text/css/...."> </style> -
尽量把内部样式放在
head描述区里面先加载样式再加载标签，保证用户体验
外部样式表
<link rel="stylesheet" href="./css/wangshuai.css">
-
创建：建立一个后缀名为.css的文件即可
-
导入：
-
<link rel="stylesheet" href="./css/wangshuai.css">优先使用！！！rel="stylesheet"建立关联性- 尽量把放在
head描述区里面
<style> @import url("./css/wangshuai.css"); </style>-
区别：
-
link 是 html 的， @import 是 css 的
-
link导入的css 和 html结构同时加载
@import 等待html结构加载完毕再加载css
-
@import 不同做一些DOM动态操作。
-
兼容性区别
-
-
内联样式表
- 创建：用
style属性里面写 css 语句 - 较少使用，维护不方便
权重
-
三个样式表同时作用在div上面，执行谁 谁的权重就最高。
-
内联样式表权重最高。
-
内部样式表 和 外部样式表权重关系和书写顺序有关
（后写的优先执行，后写把前写的覆盖,覆盖的只是相同属性，不同属性会继续执行）
- 产生权重 权重关系，必然会体现 css 的层叠性！
网页布局
选择符
1. 类型选择符
直接使用 html 标签当做选择符，选择所有的同类标签
</head>
<style>
h2{
width: 400px;
background-color: tomato;
}
div{
background-color: teal;
}
</style>
<body>
<h2>111</h2>
<div>11</div>
<div>1</div>
<div>1</div>
</body>
2. ID选择符 #id
划分网页外围的结构！
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清空所有标签外边距和内填充 */
* {
margin: 0;
padding: 0;
}
/* 公共的宽度 */
#logo,
#nav,
#banner {
width: 1000px;
}
/* logo */
#logo {
height: 100px;
background: orange;
}
/* nav */
#nav {
height: 58px;
background: black;
}
/* banner */
#banner {
height: 465px;
background: pink;
}
</style>
</head>
<body>
<!-- logo -->
<div id="logo"></div>
<!-- nav -->
<div id="nav"></div>
<!-- banner -->
<div id="banner"></div>
</body>
3. 起名规范
- 避开 关键字！
- 小写英文字母开头，后面可以跟数字字母下划线
- 反映用途
- 驼峰命名 boxLeft
- 下划线 box_left
- 连字符
4. 类名选择器 .class
-
起名
<标签 class="名称"></标签> -
应用
.名称{css样式} -
特点
-
一个标签可以有多个
class<div class="china cn chinese"></标签> -
class可以重复出现 -
更适合定义一类样式 具有相同特点的可以一起定义
起名的时候包含相同字符，然后用
.相同字符匹配
-
5. 包含选择符
通过父元素找子元素
父元素选择符 子元素选择符{ css代码 }
<style>
.box{
width:700px;
height:300px;
background:orange;
}
.box #boxSmall{
background: teal;
}
</style>
6. 群组选择符
把分散的标签组合成一组，让后给一组添加样式。
<style>
#links,
#bottomWrap
.box {
width: 1000px;
}
</style>
7. 通配符 *
选择当前页面中所有的标签！
<style>
/* 清空所有标签外边距和内填充 */
* {
margin: 0;
padding: 0;
}
</style>
8. 伪类选择符
-
对状态做更改
- 选择符:link {color: red;} 未访问的链接状态
- 选择符:visited {color: green;} /* 已访问的链接状态 */
- 选择符:hover {color: blue;} /* 鼠标滑过链接状态 */
- 选择符:active {color: yellow;} /* 鼠标按下去时的状态 */
-
顺序不能更改
-
鼠标滑过做样式更改
<style> .box{ width:500px; height:300px; background:orange; } .box:hover{ /* 鼠标滑过box之后更改自身的样式 */ background:pink; } </style>
选择符权重
- id选择符 > class选择符 > 标签选择符
- 权重总结：
| 选择符 | 权重 |
|---|---|
| 内联样式表 | 1000 |
id #id{}
|
100 |
class .class{}
|
10 |
标签 h2{ }
|
1 |
| 包含选择符 | 权重是父子元素选择符权重的和 |
| 群组选择符 | 本身的权重没有发生变化 |
| 通配符 | 0 |
| 伪类选择符 | 10 |
注：权重相同的时候，按照后写的执行。
