目录
1.外部样式表(External style sheet)(推荐)
1.什么是CSS?
1.css指层叠样式表(Cascading Style Sheets)、级联样式表
2.如果说html:负责页面架构的搭建(结构层)
3.css:就是负责排版、特效(表现层)、将页面结构与表现进行分离(修饰html元素)
4. js:动态效果(特效层)
1.使用css的好处
1.解决了内容于样式分离,页面看起来更加简洁明了
2.外部样式表 极大的提高工作效率,便于开发、维护
3.方便搜索引擎(SEO)
2.如何插入样式表
1.外部样式表(External style sheet)(推荐)
当样式需要应用很多页面时,通过改变一个文件来改变站点的外观 每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部:
这样做的好处就是样式和内容分离了,在编写代码时观看更为方便
如图:
html页面引入外联则是:
<!--rel ----->引用外部样式表的格式 -->
<!--href ----->引用外部样式表的路径 -->
<head>
<link rel="stylesheet" href="msytyle.css" type="text/css">
</head>
2.行内样式表 在标签内部 书写
3.内部样式表 在head标签内部 添加一个style标签
4.导入式 特点:将样式卸载单独的css文件中,通过@import来导入外部css样式
第一种与第四种的区别:第一种样式运行,它是从上之下,先引入css样式。第四种是全部的html文件生成之后才会执行css样式,可能会出现没有样式的html文件,刷新一下就出现有样式的css样式的情况。如果用第一种则不会出现这样情况。
注意:
行内----仅对单独的标签进行修改样式!不推荐!!!
内联----仅仅对于当前页面的样式 进行修改 不会对其他页面产生影响!!!
外联----提交复用性。
4.样式的优先级
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
注意:如果外部样式放在内部样式后面,则外部样式将覆盖内部样式
3.选择器
选择器:匹配需要修饰的html元素
四个基本选择器
1.统配选择器(*):匹配页面的所有元素(html)
当你定义一个div铺满整个页面时,总能发现div的周围离页面有一些细小的距离,这是因为div固有的边距,当你将margin 和padding 定义为0时,即可解除该问题,这也是统配选择器的用处之一;
适用于样式初始化
<style type="text/css">
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
/* 假如您需要并排放置两个带边框的框,
可通过将 box-sizing 设置为 "border-box"。
这可令浏览器呈现出带有指定宽度和高度的框,
并把边框和内边距放入框中 */
box-sizing: border-box;
}
</style>
2.标签选择器(tagName):匹配页面指定的某种元素(1-n次)。
a{
}
3.id选择器(id名):匹配具备id属性的元素
#id{
}
4.类选择启(类)首选:匹配页面上具备的class属性的元素
.类名{
}
选择器的权重
统配<标签<类<ID<(内联样式)
复合类型选择器
5.子代选择器:匹配某个元素下的直系子元素
选择器>选择器{
}
.test>li{
border:1px solid red;
}
<ul class="test">grandfather
<li> father
<ol> son
<li>2222</li>
<li>2222</li>
<li>222</li>
<li>
<ul>
<li>3333</li>
</ul>
</li>
</ol>
</li>
<li>1111</li>
<li>1111</li>
</ul>
6.复合类型选择器:
7.群组选择器:多个选择器作用同一个样式
8.后代选择器:匹配某个元素的所有后代
9.兄弟选择器: 选择器后面紧挨着的哪个标签
选择器+选择器2{
}
10.伪类选择器:捕获客户端一些行为、动作;实现部实现css、特效(辅助类选择器)
跟随在正常选择器后使用
:hover 当鼠标指向时产生的样式
.navbar-link-menu>li:hover{
/* 鼠标移动到该区域变手 */
cursor: pointer;
}
.navbar-link-menu>li:hover a{
/* 鼠标移动到文字的时候变红 */
color: red;
}
用于超链接
:link 超链接未访问时的状态
:visited 超链接访问后的状态
:active 激活状态 点击时的状态
11.属性选择器
[属性=值]{
}
4.常用的css样式属性:
1.常用单位:
px ------(绝对单位 像素)
rem ------比例
em ------比例
% ------百分比
vw/vh ------比分比
rpx ------小程序单位
2.百分比
浏览器识别的最小字体大小:12px;
浏览器默认字体大小:16px;
1em =16px;
rem:根相对(倍率)
html(响应式布局)
3.文本、字体:
font-size:2em | 32px;
font-weight:bold; ----字体加粗
font-family: ----字体;face
如:font-family: "宋体";
color: ----颜色;
font-style:itailc; i ----字体倾斜
font-decoration: -----字体划线
underline ------下划线
overline -------上划线
line-through -------中划线
text-align:left|right|center |justify -----(两端对齐);水平位置
lettter-spacing -----字体间隙
font-size: ----字体大小;
letter-spacing: 60px; -----设置字体间距
tex-decoration:none; ----可以去掉超链接下划线
文字阴影:
text-shadow:(偏移量X,偏移量Y,模糊程度,阴影颜色);
overflow: ------溢出效果
字体超出显示效果:
overflow : hidden;
text-overflow:ellipsis;
white-space:nowrap;
4.图片:
1.background-image 背景图像
默认情况下 该属性会在页面的水平或垂直方向平铺
2.背景图片平铺方式
background-repeat: no-repeat; ----图像不平铺
background-repeat:repeat-x; ----图像水平方向平铺、图像沿x轴平铺
3.背景图片位置:
background-position: center; background-position: 0px 0px; ----背景图片居中
background-position: right top; ----背景图片 右端置顶
background-position: right bottom ----背景图片 右下方
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-position ----属性设置背景图像的起始位置。
4.背景图片拉伸比:
background-size: 100% 100%; ---- 按照比例(横向)铺满 ,多余裁剪 1
ackground-size: cover;
ackground-size ----属性规定背景图像的尺寸。
cover ----把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
5.背景图片全铺
background-image:url(./bg.jpg);
background-repeat:no-repeat;
background-size:cover;
back-attachment:fixed;
5.边框
border: 1px (大小)solid(类型) red(颜色);
border-width ---- 边框宽度
border-style -----边框样式 solid dashed dotted....
border-color -----边框颜色
boeder-image ----边框图片
solid transparent; transparent ----边框透明
6.通用类
width:
height
line-height:行间距(垂直居中效果)
7.元素的显示和透明度
opacity ----透明度(取值范围:0—1)
display:none; ----隐藏元素(不占位)
display:block; ----转换为块(显示)方式
display:inline; ----改为行内显示方式
display:inline-block; ----改为行内状态显示方式
visibility --- 可见性
hidden: -- 不可见 (不可见但是占用页面位置)
容器:
<div></div>
容器在页面实际占位:
margin:外边距(元素的边框外填充的间隙)、视觉效果元素发生位移。
padding:内边距(元素的边框与实际可用区域之间填充的间隙、视觉效果元素被拉伸)
块级元素的特点:
h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
1.默认独占一行
2.宽度、高度、外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
是一个容器及盒子,里面可以放行内或者块级元素。
行内元素(inlinr-leverl)的特点::
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
1.一行可以显示多个行内元素
2.宽高不可调整
3.默认宽度是它本身内容的宽度
4.行内元素只能容纳文本或其它行内元素
行内状块元素
<img/> 、<input/>、<td>
和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
默认宽度就是它本身内容的宽度。
高度,行高、外边距以及内边距都可以控制
5.盒模型标
盒模型标准占位:(默认)box-sizing:content-box;
width(包含边框+pr+pl)+mr+ml = x
height(包含边框+pt+pb)+mt+mb = y
框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和
盒子阴影:
box-shadow: (偏移量X,偏移量Y,模糊程度,阴影颜色,默认外阴影);
内阴影inset
由内到外
1.内容层(content): 由 width/height 决定内容层大小 盒子的内容,显示文本和图像 多媒体元素......
内边距(padding): 清除内容周围的区域,内边距是透明的。 内容层与盒子之间的边距
定义值的顺序: 上 右 下 左
当值为1个的时候: 四个数值同为一个数值
当值为2个的时候: 上下同为第一个数值 左右同为第二个数值
当值为3个的时候: 上为第一个值 左右同为第二个数值 下为第三个值
当值为4个的时候: 上右下左
仅仅设置一边: padding-top padding-right padding-bottom padding-left
边框(border): 围绕在内边距和内容外的边框。
10px solid red
第一个值:表示 边框的宽度(粗细)
第二个值:表示 边框的样式 solid实线 dashed虚线
第三个值:表示 边框的颜色
仅仅设置一边: border-top border-right border-bottom border-left
外边距(margin): 清除边框外的区域,外边距是透明的。 元素与元素/浏览器之间的边距
定义值的顺序: 上 右 下 左
当值为1个的时候: 四个数值同为一个数值
当值为2个的时候: 上下同为第一个数值 左右同为第二个数值
当值为3个的时候: 上为第一个值 左右同为第二个数值 下为第三个值
当值为4个的时候: 上右下左
仅仅设置一边: margin-top margin-right margin-bottom margin-left
z-index :层级
.father::after{
content:" ";
height:0;
display:block;
clear:both;
zoom:1;
}
溢出隐藏:
overflow:hidden|auto;
overflow-y:auto|hidden;
定位:
flex 弹性盒模型:
清除浮动:
方法1、增加挡板元素
.clearFix{
clear:left|right|both;
zoom:1;
}
<div class="clearFix"></div>
方法2、为父元素增加代码段:
(1):overflow:hidden;(溢出隐藏效果保留)
zoom:1;
(2):为父元素增加伪元素:(万能清除)