css入门
一、css定义及引入方式
层叠样式表，用来描述HTML文档的呈现，书写在title标签下方添加styles双标签，style标签里书写css代码
-
内部样式表：学习使用 CSS代码写在style标签里面
-
外部样式表：开发使用 CSS代码写在卓独的CSS交件中(.css)，在HTML使用,link标签引入 放在title底下<link rel="stylesheet" href="./名字.css">
-
行内样式：配合Javascript使用 CSS写在标签的style性值里
二、选择器
查找标签，设置样式
-
标签选择器：使用标签各作为选择器，选中同名标签设置相用的样式，无法差异化同名标签的样式（eg：p、h1、div、a、img.....)
<title></title> <style> p { color:aqua; } </style> -
类选择器：查找标签，差异化设置标签的显示效果
-
定义类选择器
.类名 -
使用类选择器，标签添加 class=“类名”
<head> <title></title> <style> .red { /*标签和大括号之间有一个空格*/ color:aqua; } .size { font-size: 50px; } </style> </head> <body> /*一个类选择器可以多个标签使用*/ <div class="red">这是一个div标签</div> <p class="red size">这是一个p标签</p> /*多个类名之间用空格隔开*/ <p>p标签</p> </body>
-
-
id选择器
查找标签，差异化设置标签显示效果，一般配合JavaSc使用
-
定义id选择器
#id名 -
使用id选择器 标签添加
id=“id名 -
同一个id选择器在一个页面中只能使用一次
<head> <title></title> <style> #red { color:red; } </style> </head> <body> <div id="red">这是一个div标签</div> </body>
-
-
通配符选择器
查找页面所有标签，设置相同样式
通配符选择器：
*，不需要调用，浏览器自动查找页面所有标签，设置相同样式<head> <title></title> <style> * { color:red; } </style> </head> <body> <div>这是一个div标签</div> <p>这是一个p标签</p> <h1>这是一个h1标签</h1> </body> -
结构伪类选择器
作用：根据元素的结构关系查找元素
选择器：
-
E：first-child 查找第一个E元素
-
E：last-child 查找最后一个E元素
-
nth-child(N) 查找第N个E元素（第一个元素N值为1）
-
作用：根据元素的结构关系查找多个元素
-
功能 公式 偶数标签 2n 奇数标签 2n+1;2n-1 找到5的倍数的标签 5n 找到第5个以后的标签 n+5 找到第5个以前的标签 -n+5 /*n从0开始计算*/ li:nth-child(2n+1) { background-color: bisque; }
-
<style> li:first-child{ background-color: blue; } li:last-child { background-color: aqua; } li:nth-child(4) { background-color: bisque; } </style> </head> <body> <ul> <li>li1</li> <li>l12</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> </body> -
-
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
选择器：
-
E:before 在E元素里面最前面添加一个伪元素
-
E:after 在E元素里面最后面添加一个伪元素
注意点：
-
必须设置
content：" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可 -
伪元素默认是行内显示模式
-
权重和标签选择器相同
<style> div { width: 300px; height: 300px; background-color: pink; } /* 是行内显示模式 */ div::before { /* 必须设置content属性，没有则伪元素选择器不生效 */ content: "老鼠"; width: 100px; height: 100px; background-color: brown; /* 转换为块级*/ display: block; } /* 是行内显示模式*/ div::after { content: "大米"; width: 100px; height: 100px; background-color: orange; /* 转换为行内块 */ display: inline-block; } </style> </head> <body> <!-- 标签内容：老鼠爱大米 --> <div>爱</div> </body> -
三、画盒子
目标：使用合适的选择器画盒子
属性：
-
width 宽度
-
height 长度
-
background 背景色
<head> <title></title> <style> .red { width: 100px; height: 100px; background-color: blueviolet; } .orange { width: 200px; height: 200px; background-color:red; } </style> </head> <body> <div class="red">div标签1</div> <div class="orange">div标签2</div> </body>
四、文字控制属性
-
字体大小
font-size -
字体粗细
font-weight属性值：
-
数字：正常 400，粗细 700
-
关键字：正常 normal，粗细 bold
-
-
字体倾斜
font-style属性值：正常：normal，倾斜：italic
-
行高
line-height（设置多行文本的间距）属性值：
-
数字 +px
-
数字（当前标签font-size属性值的倍数）
垂直居中技巧：行高属性值等于盒子高度属性值
-
-
字体族
font-family属性值：字体名
多行字体同逗号隔开，从左向右依次查找，默认为sans-serif
-
字体复合属性
font：一个属性对应多个值写法，各个属性值之间用空格隔开
.font：是否倾斜 是否加粗 字号/行高 字体（要按顺序）
div { font: italic 700 30px/2 楷体; } -
文本缩进
text-indent属性值：
-
数字 +px
-
数字 +em（em=当前标签字号大小）
-
-
文本对齐
text-align要图片居中要加一个父级属性值：
-
left左对齐
-
center居中
-
right右对齐
-
-
修饰线
text-decoration属性值：
-
none 无
-
underline 下划线
-
line-through 删除线
-
overline 上划线
-
-
颜色
color表示方法：
-
颜色关键字 颜色英文单词
-
rgb表示法 rgb(r,g,b) 对于红，绿，蓝 取值0-255
-
rgba表示法 rgba(r,g,b,a) a表示透明度 取值0-1
-
十六进制表示法 #RRGGBB #000000，#ffcc00 简写#000，#fc0
-
五、复合选择器
后代选择：选中某元素的后代元素，写法：父类选择 子类选择器{css属性}
子代选择器：选中某元素的子代元素，写法：父类选择器>子代选择器{css属性}
并集选择器：选中多组标签设置相同的样式，写法：选择1,2,...n{属性}
交集选择器：同时满足多个条件的元素被选中，写法：选择器1选择器2{css属性}
伪类选择器：伪类表示元素状态，选中元素某个状态设置样式。鼠标悬停状态写法：选择器：hover{css属性}
<style>
a:hover{
color: brown;
}
/* 可以用div:hover */
/* 类选择器：hover */
.box:hover{
color: aqua;
}
</style>
</head>
<body>
<p class="box">p 标签</p>
<a href="#">a 标签,超链接</a>
<div class="box">div 标签</div>
</body>
伪类超链接状态：1、：link选择器，访问前 2、：visited选择器，访问后 3、：hover鼠标悬停 4、：active 点击时（激活）
<style>
/* 访问前就是天蓝*/
a:link{
color:aqua;
}
/* 访问后是绿色 */
a:visited{
color:brown;
}
/* 鼠标悬停是深蓝色 */
a:hover{
color:darkblue ;
}
/* 鼠标点击时是绿色 */
a:active{
color:chartreuse
}
</style>
</head>
<body>
<p class="box">p 标签</p>
<a href="#">a 标签,超链接</a>
</body>
六、CSS特性
简化代码/定位问题，并解决问题
-
继承性：子级默认继承父级的文字控制属性
<style> body { font-size: 30px; color:brown; } </style> </head> <body> <div>div标签</div> <span>span标签</span> <p>p标签 </p> <!-- 如果标签自己有样式则生效自己地样式，不继承 --> <a href="#">a标签</a> <h1>h1标签</h1> </body> -
层叠性
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
<style> div { color: aqua; font-weight: 700; } div { color:blue; font-size: 30px; } </style> </head> <body> <div>div标签</div> </body> -
优先级
也叫权重，当一个标签使用了多种选择器是，基于不同类型的选择器的匹配规则
规则：选择器优先级高德样式生效
公示：通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important（选中标签范围越大，优先级越低）
<style> /* 通配符选择器，优先级最低 */ *{ /* 加入!importat，优先级最高，颜色变为黑色 */ color: black !important; } /* 标签选择器，优先级倒数第二 */ div { color: aqua; } /* 类选择器 */ .box { color:blue; } /* id选择器 */ #test{ color: brown; } </style> </head> <body> <!-- 设置了一个行内样式，优先级第二，所以颜色是紫色 --> </body> -
优先级-叠加计算规则
叠加计算：如果是复合选择器，则需要重叠加计算
公式：（每一级之间不存在进位）
行内样式，id选择器个数，类选择器个数，标签选择器个数规则：
-
从左到右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
-
!important权重最高
-
继承权重最低
<style> /* 选择器特性(0,0,2,1) */ .c1 .c2 div { color: aqua; } /* 选择器特性(0,1,0,1) */ div #box3 { color:blue; } /* 选择器特性(0,1,1,0) */ #box1 .c3{ color: brown; } /* 比较先排除了天蓝，后排除了深蓝 */ </style> </head> <body> <div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 这行文本是什么颜色? </div> </div> </div> </body><style> /* 选择器特性(0,0,0,2) */ div p{ color: red; } /* 选择器特性(0,0,1,0) */ /* 选择器是继承，权重最低 */ .father { color: aqua; } </style> </head> <body> <div class="father"> <p class="son"> 文字 </p> </div> </body><style> /* 选择器特性(0,2,0,0) */ /* 文字颜色比较个数，则为蓝色 */ #father #son { color: blue; } /* 选择器特性(0,1,1,1) */ #father p.c2 { color: brown; } /* 选择器特性(0,0,2,2) */ div.c1 p.c2 { color: red; } /* 继承，权重最低 */ #father { color: green; } /* 继承，权重最低 */ div#father.c1 { color: yellow !important; } </style> </head> <body> <div id="father" class="c1"> <p id="son" class="c2"> 这行文本是什么颜色？ </p> </div> </body>
-
扫一扫
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
