css
css是什么
CSS是Cascading Style Sheets（级联样式表）
级联:关联
样式表:css修饰网页的语法集
优点:将页面内容与表现形式分离 可达到重复利用
css与html之间的关系
html是网页的内容
css控制外观 样式 样子
css做什么
为html控制外观
css基本语法
css三种样式表
行级样式表
行级样式表 直接将样式写在标签行内
style=“属性名1:属性值;…”
<p style="color: aqua; font-size: 30px;">床前明月光</p>
<p style="color: blue; font-size: 30px;">疑是地上霜</p>
<p style="color: antiquewhite; font-size: 30px;">举头望明月</p>
<p style=" color: aquamarine; font-size: 30px;">低头思故乡</p>
内嵌样式表
<style type="text/css">
p{
color: red;
font-size: 20px;
}
</style>
<p class="p2" align="center">床前明月光,疑是地上霜.</p>
<p class="p3" align="center">举头望明月,低头思故乡.</p>
外部样式表
<!-- <link rel="stylesheet" type="text/css" href="123.css" /> -->
选择器
选择器:将分离后的样式表与网页内容联系起来
标签选择器
通过标签选择器可以选择页面中所有指定标签
语法:标签名{}
<style>
p{
color: red;
font-size: 20px;
}
</style>
<body>
<p>春眠不觉晓</p>
</body>
类选择器
类选择器：通过标签的class值选中一组标签
语法：.class属性值{}
.p1{
color: #FF0000;
}
.p2{
color: aquamarine;
}
.p3{
font-size: 30px;
}
<p class="p2">处处闻啼鸟.</p>
<p class="p1">夜来风雨声,</p>
<p class="p2">花落知多少.</p>
id选择器
#+id值
#title{
属性名:属性值;
}
<p id="title">春眠不觉晓</p>
通配选择器
*{
属性名:属性值;
}
选择器的优先级
通配选择器<标签选择器<类选择器<id选择器
行级样式高于所有选择器
后代选择器
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
子选择器
<html>
<head>
<style type="text/css">
h1>em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<h1>This is a <em>important</em> paragraph.</h1>
</body>
</html>
/*第二个h1不受影响*/
相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
()+()
文本
font-size 字体大小
color 字体颜色
font-family字体
text-align文本对齐
text-decortion:underline:定义下划线
line-height:设置行高
font-weight:字体粗细
font-style:italic;斜体文本
text-indent:首行缩进
letter-spacing:字符间距
背景
background-color
background-image
background-repeat
background-size
background-position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.b1{
width: 500px;
height: 500px;
background-color: #FF0000;
background-image: url(img/nike.gif);
background-repeat: no-repeat;
background-position: bottom;
background-size: 250px;
}
</style>
<body>
<p class="b1">1111111</p>
</body>
</html>
标签分类
块级标签
无论有多少内容 都会独占一行
默认宽:与父级的标签一致
默认高:0 内容的高度
可以通过width heigth设置宽高
行级标签
只占自身大小,并不会占一行
设置宽高无效
行块级标签
可以设置宽高,不占一行
img input
列表
list-style-type：none；没有图标
list-style-position：inside；控制图标位置
list-style-image：url（）插入图标图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.s1{
/* list-style-type: none;
list-style-position: inside;控制图标位置
list-style-image:url(img/nike.gif); */
list-style: url(img/nike.gif) inside none;
text-align: center;
}
</style>
</head>
<body>
<ul class="s1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
</body>
</html>
伪类
class=“c”
c:link 表示未访问的链接
c:visited 表示已经请访问过的链接
c:hover 鼠标放在上的位置
c:active 鼠标点击的样式
透明度
opacity:0.5;
盒子
盒子模型是由margin(外边距)border(边框)padding(内边距)content(内容)
内容区
盒子放内容的区域
width height只是设置内容区的大小
如果没有设置内边距和边框的大小,内容区就是标签的大小
标签大小=内容区+内边距+边框
内边距
padding 就是内容区到边框的距离 会影响标签的大小
padding:10px 5px;上下 左右
padding:10px 10px 10px 10px;上 右 下 左
img{
display:block; 图像标签下面默认有一个间隔;
}
line-height=height;
text-align=center; 是文字水平垂直居中
border
有四个属性:颜色 边框样式 宽度 弧度
margin
外标签不会影响标签的大小,但会影响标签的位置
浮动
float:none|left|right
只能在水平位置上来改变元素块的显示方式
clear----清除浮动
定位
相对定位
position:relative
如果对一个元素进行相对定位.首先他将出现在其所在位置上,然后通过设置垂直或水平设置,让这个元素相对于它的原始起点进行移动.此外相对定位时,无论是否进行移动,元素仍然占据原来的空间,移动元素会覆盖其他框
绝对定位
positive:absolute
绝对定位时参照浏览器的左上角,配合left,bottom,right,top进行定位,如果没有上述四个值,则默认依据父级的坐标原点为起点.绝对定位可以使之在任何一个位置
两者区别
绝对定位和相对定位的区别在于:
绝对定位的坐标原点为上级元素的原点,与上级元素有关;
相对定位的坐标原点为本身偏移前的原点
本文地址：https://blog.csdn.net/weixin_48304611/article/details/109558627
