css学习笔记
一、css选择器与引入方式
选择器:
- 元素选择器
p{
color:gold;
}
//设置所有p标签的属性
- id选择器
#ceshi{
color:gold;
}
<p id="first">揽尽星辰入怀 千川归来 化一片沧海</p> //需要使用id引入才能使属性生效（通常用于描述一个标签具有唯一的样式）
- class选择器
.blue{
color:blue;
}
<p class="blue">我就在这里埋好烈酒候你故事开</p>//必须使用class引入才能使属性生效（通常用于修饰一组或者一系列具有相同样式的标签）
- 通配符选择器
*{
pading:0;
margin:0;
list-style: none;
}
对页面中所有的标签都起作用
通配符选择器:一般情况下在css页面刚开始的时候 ,描述通用属性使用
导入样式:
- 行内样式
<h1 style="color:red">等你归来-程响</h1>//在标签中写入style属性
- 内嵌样式
<style type="text/css"> p{ color:gold; } </style>(内嵌样式必须写在<head><head/>标签里面)
- 外链样式
<link rel="stylesheet" type="text/css" href="./css/1.css">（放在<head><head/>标签外面）
- 导入样式
<style type="text/css"> @import url(./css/1.css); </style>(放在<style>标签里,这个样式不常用)
选择器的优先级:行内 > Id > class>标签
导入方式的优先级:行内样式>内嵌样式>外链样式>导入样式
注意事项：他们的优先级不是固定的，以哪种方式举例修饰的目标最近，那么谁的优先级就越高 --------- 就近原则
二、文本控制
| 功能 | 语法 |
|---|---|
| 设置字号 | font-size:12px |
| 设置字色 | color:#000000 |
| 设置字体 | font-family:Arial,‘宋体’ |
| 设置行高 | line-height：150% line-height：1.5em |
| 设置字体的粗细 | font-weight：normal[正常]bold[粗体] |
| 设置对象中文本的缩进 | text-indent:2em 可以为负值 |
| 文本水平对齐方式 | text-align:left[左]center[中]right[右] |
| 设置文本划线 | text-decoration: none; [没有下划线]underline [下划线]overline [上划线]line-througn [贯穿线] |
| 文本大小写控制 | text-transform:none[正常大小]capitalize[每个单词的第一个字母转换成大写]uppercase[转换成大写]lowercase[转换成小写] |
浏览器默认字体大小为:16px.
常用单位：px 像素 em当前字体尺寸
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式
三、css伪类
| 状态 | 语法 |
|---|---|
| 未访问的链接 | a:link{color:#ff0000} |
| 已访问的链接 | a:visited{color:#00ff00} |
| 鼠标移动到链接上 | a:hover{color:#ff00ff} |
| 鼠标按下到链接上 | a:active{color:#0000ff} |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
color: blue;
}
.yellow {
color: yellow;
font-size: 3em;
}
</style>
<script>
//寻找h1的结点对象
//进入页面加载事件
window.onload = function () {
//寻找h1的节点对象
hNode = document.getElementById("one");
//弹出警告框
//分别把两个事件绑定给h1节点对象 并生成函数
hNode.onmouseover = function () {
//h1节点的class样式变更成yellow
hNode.className = "yellow";
}
hNode.onmouseout = function () {
//h1节点的class样式变回原有的one的样式
hNode.className = "one";
}
}
</script>
</head>
<body>
<h1 class="one" id="one">我是一个大好人</h1>
</body>
</html>
四、组合选择器
选择 <div> 元素内的所有 <p> 元素
div p {
background-color: red;
}
选择class为red的<div>
div.red{
font-size: 30px;
color: red;
}
同时选中h1标签和p标签
h1,p{
text-align: center;
font-size: 30px;
}
选择div下所有为p的子元素
div > p {
background-color: yellow;
}
选择p下面含有title属性的元素
p[title]{
color: red;
}
选择ul下中的li的第一个子元素
ul>li:first-child{
color: red;
}
选择ul下中的li的最后一个子元素
ul>li:last-child{
color: red;
}
选择ul下中的li的第二个子元素(括号里的数字可以改变比如写3就表示选中第三个元素，写n就表示全选中)
ul>li:nth-child(2){
color: red;
}
选择ul下中的li中的所有子元素除了第二个子元素
ul>li:not(:nth-child(2)){
color: red;
}
五、盒子模型
整个盒模型在页面中所占的宽度是由:左边距+左边框+左填充+内容+右填充+右边框+右边界组成
常用属性:
| 功能 | 语法 |
|---|---|
| 设置元素的宽度 | width:100px; |
| 设置元素的高度 | height:100px; |
| 设置元素的某一个方向外边距 | margin-top/right/bottom/left:10px; |
| 设置外边距 | margin:10px;上下左右4个方向 margin:10px 20px;上下 左右 margin:10px 20px 30px;上 左右 下 margin:10px 20px 30px 上 右 下 左 |
| 设置内边距 | padding:10px;上下左右四个方向(跟margin的用法一样) |
| 设置边框粗细 | border-top-width:12px; |
| 设置边框样式 | border-top-style:solid[实线]、dashed[虚线] |
| 设置边框颜色 | border-top-color:#000000 |
| 设置某一边框属性的简捷方式 | border-边框位置:线框 线型 颜色; |
| 设置某一个元素四条边框的简捷方式 | border:线框 线型 颜色; |
块元素
display:block; 块状元素的默认属性，具有宽度和高度属性 width height，比较霸道，不允许其他元素和它同行显示，常见块状元素为div、p、body、h1-h6 等
内联元素
display:inline 内联元素的属性，不具有 高度和宽度 这两个属性，允许其他元素和它同行显示，常见内联元素为a、em、span 等
设置元素消失效果:
常用的几种隐藏方式:
1.display：none
2.宽度和高度设置成0
3.overflow：hidden
<div class="hezi">
<p>点我消失</p>
</div>
<style>
.hezi p{
color: red;
text-align: center;
line-height: 100px;
}
.hezi{
width: 100px;
height: 100px;
background-color: green;
}
.hezi:hover{
display: none;
}
</style>
六、背景设置
| 功能 | 语法 |
|---|---|
| 背景 | background:颜色 图片 平铺方式 固定方式 位置 |
| 背景颜色 | background-color：#ccc； |
| 背景图像 | background-image：url（背景图像的位置及全称） |
| 背景图像的重复方式 | background-repeat:[repeat、no-repeat、repeat-x、repeat-y] |
| 背景图像的位置 | background-position：top[left center right]center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px） |
| m背景图像的依附方式 | background-attachment;[scroll、fixed] |
实例(精灵效果):
这是两张不同的照片通过设置背景来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
width: 55px;
height: 54px;
display: block;
background: url(./image/toolbar_cart.png);
}
a:hover{
background: url(./image/toolbar_cart_focus.png);
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
一张的图片实例:
使用改变位置的方法来实现(效果跟上面一样)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
width: 54px;
height: 55px;
display: block;
background: url(./image/b.jpg)0 0;
}
a:hover{
background: url(./image/b.jpg)0 -51px ;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
七、定位与浮动
注意:块元素脱离文档流过后将不再独占一行
一、 float:none;(默认情况下)
.two{
font-size: 40px;
width: 200px;
height: 200px;
background-color: green;
}
.one{
font-size: 40px;
width: 200px;
height: 200px;
background-color: red;
}
二、 float:left;(给one设置左浮动使其脱离文档流two上移并被第一个盒子遮住)
.one{
float: left;
font-size: 40px;
width: 200px;
height: 200px;
background-color: red;
}
三、 float:right;(给two设置右浮动one设置左浮动,两个盒子互补干涉)
.two{
float: right;
font-size: 40px;
width: 200px;
height: 200px;
background-color: green;
}
.one{
float: left;
font-size: 40px;
width: 200px;
height: 200px;
background-color: red;
}
定位:
position:static(默认值)只有设置了除了static(默认值)的定位才能设置（偏移量）top,bottom,left,right
position:relative(相对定位)
1.元素开启定位以后，如果不设置偏移量元素不会发生任何变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
position: absolute;(绝对定位)
1.开启绝对定位后，如果不设置偏移量元素不会发生任何变化
2.开启绝对定位后，元素会从文档中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会提升元素一个层级
5.绝对定位元素是相对于其包含块进行定位的
position: fixed;（固定定位）固定定位也是一种绝对定位，所以固定定位的特点绝大部分和绝对定位一样，唯一不用的是固定定位永远参照浏览器的视口进行定位
position: sticky;(粘滞定位)粘滞定位的特点和我们的相对定位的特点基本一致，但是不同的时粘滞定位可以在元素到达某个位置的时候将其固定。
/*设置固定定位*/
position: fixed;
left: 0;
top: 0;
/*设置粘滞定位*/
position: sticky;
top: 20px;
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
