CSS
css的三种引入方式
- 行内样式
- 内接样式
- 外接样式
- 3.1 链接式
- 3.2 导入式
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<!--<style>-->
<!--/*内接样式*/-->
<!--p{-->
<!--font-size: 30px;-->
<!--}-->
<!--</style>-->
<!--外接样式：链接式-->
<!--<link rel="stylesheet" href="./index.css">-->
<!--导入式-->
<style>
@import url(index.css);
</style>
</head>
<body>
<!--
1. 行内样式
2. 内接样式
3. 外接样式
3.1 链接式
3.2 导入式
-->
<div>
<!--行内样式-->
<p style="color: aqua">这是一个段落</p>
<a href="http://www.baidu.com"> 单击跳转到百度</a>
</div>
</body>
基础选择器
标签选择器
- 可以选择所有的标签元素，比如：div,ul,ku,p
- 不管标签藏的多深，都能选中
- 选中的是共性，而不是特性
id选择器
- 使用‘#’ 选中标签的id
- 同一个页面中id不能重复
- 任何的标签都可以设置id
- id命名规范：以字母开头，可以有数字，下划线，杠，大小写严格区分
<!--style-->
#list1{
font-size: 25px;
color: #ff7e79;
}
<div>
<ul id="list1">
<li>喵喵喵</li>
<li>汪汪汪</li>
<li>咩咩咩</li>
</ul>
</div>
类选择器
- class，使用"."代表类，调用时 .类名
- 类是可以重复的
- 同一个标签中可以携带多个类 用空格隔开
- 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
高级选择器
后代选择器
- HTML元素是可以嵌套的，可以从某个元素的后代查找特定的元素，并设置样式
div p {
color: red;
}
儿子选择器
div>p {
color: red;
}
<!--从div的直接子元素中找到p标签，设置字体颜色为红色-->
交集选择器
- 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类选择器或者id选择器
h3.active{
color:red;
}
并集（组合）选择器
- 当多个元素的样式相同的时候，没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
a,h4{
color:#666;
font-size:20px;
}
属性选择器
根据属性查找
[title] {
color: red;
}
根据属性和值查找
- 找到所有title属性等于hello的元素：
[title="hello"] {
color: red;
}
- 找到所有title属性以hello开头的元素：
[title^="hello"] {
color: red;
}
- 找到所有title属性以hello结尾的元素：
[title$="hello"] {
color: red;
}
- 找到所有title属性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
- 找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
color: red;
}
伪类选择器
- 爱恨原则：love hate顺序不能乱! link-visited-hover-active
<style>
/*访问过的超链接a标签样式：*/
a:visited{
color: darkblue;
}
/*鼠标点击瞬间的样式：*/
a:active{
color: black;
}
/*鼠标悬浮在元素上应用样式：*/
a:hover{
color: yellow;
}
/*没有访问过的超链接a标签样式*/
a:link{
color: chartreuse;
}
</style>
使用伪类选择器实现鼠标悬停显示图片：
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
ul li{
position:relative;
}
ul li img{
display: none;
position: absolute;
top: -16px;
left: 50px;
}
ul li:hover img{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="list1">
<a href="#"> 这是一个链接</a>
<img src="images/car1.png" alt="喵">
</ul>
</div>
</body>
nth-child的使用：
- first-child选中第一个
- lath-child选中最后一个
/*
nth-child()：
括号内数值设置：
数字 选中那个哪个数字哪一行就使用更改元素，从1开始
n 选中所有
2n-1 隔一个选一个
*/
div ul li:nth-child(2n-1){
color: darkgray;
}
伪元素选择器
- first-letter:用于为文本的首字母设置特殊样式。
p:first-letter {
font-size: 48px;
}
- before:用于在元素的内容前面插入新内容，使用时与content一起使用。
p:before {
content: "*";
color: red;
}
- after:用于在元素的内容后面插入新内容。(使用频繁)，作用：清除浮动
p:after {
content: "?";
color: red;
}
css的特性
继承性
- 继承：给父级设置一些属性，子级继承了父级的该属性
- 可继承的属性：
- color:颜色
- font开头：字体相关设置
- text开头：文本样式
- line开头：行元素
- 不可继承的属性：盒子元素，定位元素（浮动，绝对定位，固定定位）
层叠性
- 权重大的标签覆盖权重小的标签
- 权重：谁的权重大，浏览器就会显示谁的属性，比较id 类 标签数量
- 当权重一样的时候，以后设置的属性为准，后来者居上
- 先看有没有被选中，如果选中了，便计算id,class 标签的数量，谁的权重大就显示谁的属性，如果都没有被选中，权重为0
- 如果属性都是被继承下来的，权重都是0，便以‘就近原则’：谁描述的近，就显示谁的属性
!important
- 权重无限大
- 不影响继承来的元素
- 只影响选中的元素
p{
color:red !important
}
盒模型
盒模型的五个属性：
- 宽
- 内容的宽度，而不是整个盒子真实的宽度
- height：高
- 内容的高度，而不是整个盒子真实的高度
- pading：内边距
- border：边框
- margin：边框外
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
div{
300px;
height: 500px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p>很多内容～很多内容～很多内容～很多内容～很多内容～很多内容～很多内容～很多内容～很多内容～很多内容～</p>
</div>
</body>
padding
- padding的区域是有背景颜色的，并且背景颜色与内容区域颜色一样，也就是说background-color这个属性将填充所有的border以内的区域
- padding的设置：四个方向，可以分别描述四个方向padding
- 小属性
- 综合属性：用空格隔开
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
div{
300px;
height: 500px;
background-color: red;
/*小属性设置*/
/*padding-top: 30px;*/
/*padding-right: 30px;*/
/*padding-bottom: 30px;*/
/*padding-left: 30px;*/
/*综合属性设置:使用空格隔开*/
/*上、右、下、左*/
/*padding:30px 20px 50px 40px;*/
/*上、左右、下*/
/*padding: 30px 20px 50px;*/
/*上下、左右*/
padding: 20px 30px;
}
</style>
</head>
<body>
<div>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>
</body>
- 在布局时一般要清除样式表：将所有标签的padding与margin设置为0
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
border
- 边框三要素：粗细 线性 颜色
- 颜色默认时黑色
- 粗细默认时3px
- 如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
- border-radius:可以设置盒子角的半径
border: solid
- 其他用法
div{
200px;
height:500px;
border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
}
<!--按照方向划分-->
div{
200px;
height:500px;
/*上*/
border-top- 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right- 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left- 10px;
border-left-color: red;
border-left-style:solid;
}
/*上面代码可以简写*/
div{
20px;
height:20px;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
}
- 使用border来制作小三角
div{
0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
margin
- 在垂直方向上给两个盒子设置margin，以较大的为准
- 浮动的盒子垂直方向不塌陷
- 水平方向上的盒子以margin为准，不塌陷
- 使用margin：0 auto；水平居中
- 必须要有width，明确的width
- 当一个盒子浮动、固定定位、绝对定位，margin：0 auto不能使用
- margin:0 auto 居中盒子而不是居中文本
标准文档流
- 标准文档流下的围观现象：
- 空白折叠现象
- 高矮不齐，底边对齐
- 自动换行，一行写不满，换行写
行内元素和块级元素转换
行内元素与块级元素的区别：
- 行内元素：
- 与其他行内元素并排
- 不能设置宽高，默认的宽度就是文字的宽度
- 块级元素：
- 独占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认是父亲的100%
块级元素和行内元素的分类：
- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
- 块级元素：所有的容器级标签都是块级元素，还有p标签。
块级元素和行内元素的互相转换
- 可以使用display属性将块级元素和行内元素进行互相转换
- inline:行内元素
- block:块级元素
- inline-block:行内块元素
<head>
<meta charset="UTF-8">
<title>行内元素与块级元素的互相转换</title>
<style type="text/css">
/*将行内元素转换为块级元素，转换后拥有块级元素的属性*/
span{
display:block;
200px;
height: 200px;
background-color: red;
padding: 20px;
}
/*将块级元素转换为行内元素*/
p{
display: inline;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
<span>这是一个span标签</span>
<a href="#">这是一个链接</a>
</div>
<div class="div1">
<p>喵喵喵</p>
</div>
</body>
布局
浮动
- float（浮动）
- 效果：两个元素并排，并且两个元素都能设置宽度和高度
- 浮动的特性：
- 浮动的元素脱标
- 浮动的元素互相贴靠
- 浮动的元素有‘字围’效果
- 当div浮动，p不浮动，div挡住了p，div的层级提高，单是p中的文字不会被遮盖，形成了字围效果
- 紧凑效果
- 一个浮动元素，如果没有设置宽度，那么就自动收缩为文字的宽度
- 所有标签一旦设置浮动，能够并排，并且不区分行内元素与块级元素，都可以设置宽高
- 永远不是一个盒子单独浮动，要浮动就要一起浮动
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.div1{
200px;
height: 50px;
background-color: darkgray;
float: left;
}
.div2{
200px;
height: 50px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
清除浮动的方式：
- 给父级元素设置高度
- clear-both：内墙法
- 给盒子之间加一个空的div，然后设置空div的clear：both；
- 缺点：无缘无故加了div元素，结构冗余
- 伪元素清除浮动 after：
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.course_list ul li{
background-color: red;
float: left;
200px;
height: 40px;
}
.none{
background-color: black;
500px;
height: 300px;
}
/*使用伪元素选择器清除浮动
*/
.clearfix:after{
content: '.';
clear: both;
height: 0;
visibility: hidden;
display: block;
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>Python</li>
<li>WEB</li>
<li>Liunx</li>
</ul>
</div>
<div class="none">
</div>
</body>
- 清除浮动：overflow：hidden
- visible:默认值，内容不会被修剪，会呈现在元素框外
- hidden:内容会被修剪，并且内容是不可见的
- scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
- auto:如果内容被修剪，则浏览器显示滚动条以便查看其余内容
- inherit:规定应该从父元素继承overflow属性的值
文本属性和字体属性
- 设置字体大小px ：像素 rem,em %也是单位
font-size: 30px;
- 字体样式：font-weight
- normal:默认值，标准粗细
- bold:粗体
- border:更粗
- lighter:更细
- 100~900 :自己设置字体大小
- inherit:继承父元素字体的粗细值
font-weight: bold;
-
文本匹配：text-align
- center:水平居中
- left：左边对齐
- right：右对齐
- justify：两端对齐
-
text-decoration:文字装饰。
- none:默认。定义标准的文本
- underline：定义文本下的一条线
- overline：定义文本上的一条线
- line-through：定义穿过文本下的一条线
- inherit：继承父元素的text-decoration属性的值
-
line-height:行高
- 行高等于盒子的高度，让文本垂直居中，只适用于单行文本
- 行高 * 行数 ，用盒子的高度减去行高乘行数然后除2，设置padding-top的高度为除2后的结果，height相对应的减去除2后的结果，这就是设置多行文本居中的方法
-
text-indent:设置一个段落的首字缩进
- 设置一般单位是em，em代表的是一个字的大小
<head>
<meta charset="UTF-8">
<title>多行文本居中</title>
<style>
div{
300px;
/*height - (400-210)/2 */
height: 305px;
/*padding-top = (400-210) / 2 */
padding-top: 95px;
border: 1px solid red;
/*行高 * 行数 = 210*/
line-height: 30px;
}
</style>
</head>
<body>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
- font-family
背景
背景颜色
- background-color:
- 颜色单词
- rgb表示法
- 十六进制表示法
div{
background-color: red;
background-color: rgb(255,255,255);
<!--rgba a表示的透明度，越低越透明-->
background-color: rgba(255,255,255,0.5)
}
背景图片
- background-img 设置背景图片
div{
background-image:url(图片地址);
}
- background-repeat
- 默认属性是repeat（平铺）
- no-repeat(不平铺)
- repeat-x(水平平铺)
- repeat-y(垂直平铺)
- background-position定位
- 正值 第一个值表示水平偏移，第二个值垂直偏移
- 可使用该属性进行图片切割（雪碧图）
- 也可以不传坐标参数，直接传方向。水平方向：left center right 垂直方向：top center bottom
div{
background-position:100px 100px
}
- background-attachment：
div{
<!--固定背景图不动-->
background-attachment: fixed;
}
- 使用综合属性
div{
background: url("./images/car1.png") no-repeat center center;
}
定位
- 三种定位方式：
- 相对定位：position:relative;
- 绝对定位：position:absolute;
- 固定定位：position:fixed;
相对定位：
- 如果对当前元素仅仅设置相对定位，与标准流下的没有什么区别
- 设置相对定位之后，可以使用四个方向的属性：top left right bottom
div{
200px;
height: 200px;
background-color: black;
/*相对定位：相对于自己原来的本身定位top：20px
那么盒子相对于原来的位置向下移动。相对定位仅仅微调我们元素的位置*/
position: relative;
top: 20px;
left: 20px;
}
- 相对定位的特性
- 不脱离标准流
- 形影分离
- 占着茅坑不拉屎
- 相对定位的用途
- 微调元素位置
- 做绝对定位的参考
绝对定位
-
特性
- 脱离标准流
- 做遮盖效果，提升层级
- 设置绝对定位之后不区分行内元素与块级元素，都能设置宽高
-
绝对定位参考点
- 当使用top属性的时候，绝对定位参考点以页面左上角（浏览器左上角）为参考点来调整位置
- 当使用bottom属性的时候，是以首屏左下角为参考点
-
绝对定位以父级元素作参考点（父相子绝）
- 父级元素设置相对定位，子元素设置绝对定位，那么会以父被元素左上角为参考点，调整子元素的绝对位置
- 父绝子绝，父固子绝都是以父级元素为参考点
- 父绝子绝没有实战意义，因为绝对定位是脱离标准流，影响页面的布局
- 绝对定位的子盒子无视父级的padding
<head>
<meta charset="UTF-8">
<title>参考点</title>
<style>
.box1{
400px;
height: 400px;
margin: 100px;
border: 5px solid red;
/*父级元素设置相对定位*/
position: relative;
}
.p{
100px;
height: 100px;
background-color: pink;
/*子元素设置绝对定位，参考点为父级元素的左上角*/
position: absolute;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div class="box1">
<p class="p">
</p>
</div>
</body>
- 绝对定位盒子居中
<style>
.box1{
100%;
height: 40px;
background-color: #666666;
}
.box2{
800px;
height: 40px;
background-color: pink;
/*子元素设置绝对定位后居中显示*/
position: absolute;
left: 50%;
margin-left: -400px;
/*
设置绝对定位之后，margin:0 auto不起任何作用，如果想让绝对定位的元素居中
设置子元素left:50%然后设置
margin-left等于元素宽度的一半（负），实现绝对定位盒子居中
*/
}
</style>
固定定位
- 固定定位：固定当前位置不会随着滚动而滚动
- 特性：1.脱离标准流 2.提升层级 3.固定不变，不会随页面滚动而滚动
- 参考点：用top描述的时候以浏览器左上角为参考点，如果用bottom描述，那么是以浏览器左下角为参考点
- 作用：
-
返回顶部栏
-
固定导航栏
-
小广告
-
z-index
- 特性：
- z-indes值 表示谁压着谁，数值大的压盖住数值小的
- 只有定位了的元素，才能有z-index，也就是说不管相对定位，绝对定位，固定定位都可以使用z-index，而浮动元素不能使用
- z-index值没有单位，就是一个正整数，默认的z-index值为0
- 如果大家都没有z-index值，或者z-index值一样，那么谁写在html后面，谁就在上面压着别人，定位了的元素，永远压住没有定位的元素