css
写出好看的文字
文字属性
- font-family：‘字体’ , ’字体’；
- font-size：00px（字体大小）；
标题标签需要单独指定大小 - font-weight：normal，bold（粗体），bolder（超粗），lighter（细体）；
- font-style：normal，italic（斜体）；
复合字体属性（顺序不能乱）
字体样式 字重 字体大小/行间距 字体类型；
文本的修饰
文字样式
text-decoration=___;
- text-decoration可以设置添加到文本的修饰。
- text-decoration默认值为none, 定义标准的文本。
- text-decoration的值为underline为定义文本下的一条线。
- text-decoration的值为overline为定义文本上的一条线。
- text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
段落缩进
text-indent:2em;
行间距
line-height:1.5em;
字间距
letter-spacing:50px;
word-spacing:50px;
文本对齐方式
text-align:center;
text-align:left;
text-align:right;
文字格式化标签（粗体，斜体，下划线等）
<strong></strong>加粗
<b></b>加粗
<em></em>斜体
<i></i>斜体
<del></del>删除线
<ins></ins>下划线
颜色修改
背景颜色
background-color:颜色值
背景颜色半透明：
background:rgba(0,0,0,透明度);
透明度取值在0~1。
特殊字符的输入
背景图片
background-image:url(地址);
图片平铺：
background-repeat:__;
背景图片位置：
background-position:方位词 方位词 方位词;
方位词定位（无顺序要求）
背景图片精确定位：
使用混合单位（含top center等）
背景图固定：
background-attachment:__;
复合写法：
链接形式
<link href="base.css" rel="stylesheet" type="text/css" />
<a href=“网页地址”></a>
<a herf=“ ” target=“ ”></a>
target------链接打开方式
“_blank”新窗口打开
“_self”当前窗口打开
链接样式的改变
以下的均需单独指出
未访问的链接
a:link {
color: blue;
}
访问过的链接
a:visited {
color: purple;
}
鼠标悬停在链接上
a:hover {
color: red;
}
（当鼠标悬停时，默认为手指型）
选中的链接
a:active {
color: yellow;
}
鼠标悬停的变化
通过:hover 伪类选择器来改变鼠标悬停时的样式
div:hover {
cursor: pointer; /* 鼠标形状 */
color: red; /* 文字颜色 */
text-decoration: underline; /* 下划线 */
}
其中，cursor可以改变鼠标形状：
none：无光标
help：是一个问号或气球
pointer：为指向链接的手指
progress：表示正在加载，通常是旋转的圆圈
wait：表示计算机正在工作，但仍可操作的光标，通常是圈圈
crosshair：光标为十字线
text：文本选择光标
vertical-text：横向的文本选择光标
move：表示移动光标，通常是带有一个箭头的十字线
no-drop：表示无法放置的光标，通常是圆圈和斜线组成的光标
not-allowed：表示无法执行该操作的光标，通常是带有一个禁止符号的圆圈
zoom-in：放大光标
zoom-out：缩小光标
选择器
标签选择器
以HTML的基础标签为对象
h1{
font-weight:normal;
color:red;
}
类选择器
调用时需要用class=" "
.stress {
color: red;
}
id选择器
类选择器可以多次使用，id选择器只能用一次
子选择器
只能选择下一级，不能跨级选择
<style type="text/css">
/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.food>li {
border: 1px solid red;
}
.first>span{
border:1px solid red;
}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
食物
- 水果
- 香蕉
- 苹果
- 梨
- 蔬菜
- 白菜
- 油菜
- 卷心菜
后代选择器
凡被属于的，均可以选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
*{
list-style-type: none;
}
.food>li {
width:100px;
border: 1px solid red;
}
.first>span{
border:1px solid red;
}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
通配符选择器（直接改全局）
伪类选择器
给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{
color:red;
}
并集选择器
.first,#second,span{color:green;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
.first,#secon,span{color:green;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg">
</body>
</html>
样式的继承
当对一个标签的样式进行修改后，其后代标签均继承此样式
以下样式可以继承：
Visibility（元素可见性），Cursor（光标），Letter-spacing（字母间距），Text-indent（首行缩进），Text-align（文本对齐方式），List-style（列表符号样式）List-style-type（列表符号类型），Border-collapse（边框合并)
选择器的优先级（重要）
标签分类
块状元素
block
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
<dl>: 这是一个定义列表元素，用于创建包含项目和定义的列表。
<address>: 这是一个地址元素，用于表示地址信息。
<blockquote>: 这是一个块引用元素，用于表示长引用或块级文本的一部分。
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素(又叫行内元素)
inline
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
<em>: 这是一个内联元素，用于表示强调文本。它通常使用斜体显示强调的文本。
<strong>: 这是一个内联元素，用于表示重要的文本。它通常使用粗体显示重要的文本。
<label>: 这是一个内联元素，用于定义表单控件的标签。它通常与“for”属性一起使用，以关联标签和表单控件。
<q>: 这是一个内联元素，用于表示短引用或短文中的引用。
<var>: 这是一个内联元素，用于表示变量。它通常使用斜体显示变量。
<cite>: 这是一个内联元素，用于表示引用的来源或作品的标题。它通常使用斜体显示引用的来源或作品的标题。它通常使用等宽字体显示计算机代码。
- 和其他元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素(行内块元素）
inline-block
<img>、<input>
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素显示模式的转换
盒子模型
边框属性
- border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。 - border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。 - border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。 - 盒子添加边框
border:2px solid red;
or
border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red; - 设置圆角
border-radius: 20px 10px 15px 30px;
（左上，右上，右下，左下）
or
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;
盒子距离（内，外）
- 内边距（填充）
指内容与边框的距离
padding:20px 10px 15px 30px;
or
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
or
padding:10px 20px;(上下为10px，左右为20px。) - 外边距
盒子与外部元素的距离
margin:20px 10px 15px 30px;
or
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
如果上右下左的边界都为10px;可以这么写：
margin:10px;
如果上下边界一样为10px，左右一样为20px，可以这么写：
margin:10px 20px;
布局
浮动模型
float:left;
当盒子浮动后，只会让后面的盒子补上，而不会影响前面的盒子
清楚浮动
额外标签法
即使用clear属性：
在浮动元素之后添加一个元素，并将其clear属性设置为left、right或both，以清除前面的浮动。
html
<style>
.clear {
clear: both;
}
</style>
<div style="float: left;">浮动元素</div>
<div class="clear"></div>
在上面的例子中，<div class="clear"></div>将清除前面的浮动元素。
使用overflow属性：
给包含浮动元素的父元素添加一个overflow属性，并将其值设置为auto或hidden，这也可以清除浮动。这是一种简单但不太通用的一种方法。
html
<style>
.overflow {
overflow: auto;
}
</style>
<div style="float: left;">浮动元素</div>
<div class="overflow"></div>
在上面的例子中，.overflow将清除前面的浮动元素。请注意，此方法可能会影响父元素的宽度，因此需要谨慎使用。
使用伪元素清除浮动：
使用:after伪元素来清除浮动，这是一种常用的方法。给包含浮动元素的父元素添加一个:after伪元素，并将其内容设置为一个空格，然后设置clear属性来清除浮动。
html
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix">
<div style="float: left;">浮动元素</div>
</div>
在上面的例子中，.clearfix::after将清除其父元素内的浮动元素。
层模型（定位）
position
- 绝对定位(position: absolute)
- 相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
position:absolute;
left:100px;
top:50px;
- 相对定位(position: relative)
相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
- 固定定位(position: fixed)
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标屏幕内的网页窗口，并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用
相对于其它元素进行定位时，使用position:relative
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0;
left:0; /*这条css样式可以省略*/
}
flex弹性盒子模型
- 设置display: flex属性可以把块级元素在一排显示。
- flex需要添加在父元素上，改变子元素的排列顺序。
- 默认为从左往右依次排列,且和父元素左边没有间隙。
设置横轴排列方式
定义在主轴上的对齐方式。其属性值分别为：
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐
.box {
background: blue;
display: flex;
justify-content: flex-start;
}
flex-end：右对齐
.box {
background: blue;
display: flex;
justify-content: flex-end;
}
center： 居中
.box {
background: blue;
display: flex;
justify-content: center;
}
space-between：两端对齐，项目之间的间隔都相等。
.box {
background: blue;
display: flex;
justify-content: space-between;
}
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.box {
background: blue;
display: flex;
justify-content: space-around;
}
设置纵轴排列方式
定义在交叉轴上的对齐方式。属性值分别为：
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：默认值，左对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-start;
}
flex-end：交叉轴的终点对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-end;
}
center： 交叉轴的中点对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: center;
}
baseline：项目的第一行文字的基线对齐。
.box {
height: 700px;
background: blue;
display: flex;
align-items: baseline;
}
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
.box {
height: 300px;
background: blue;
display: flex;
align-items: stretch;
}
.box div {
/*不设置高度，元素在垂直方向上铺满父容器*/
width: 200px;
}
给子元素设置flex占比
- 给子元素设置flex属性,可以设置子元素相对于父元素的占比。
- flex属性的值只能是正整数,表示占比多少。
- 给子元素设置了flex之后,其宽度属性会失效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex占比</title>
<style type="text/css">
.box {
height: 300px;
background: blue;
display: flex;
}
.box div {
width: 200px;
height: 200px;
}
.box1 {
flex: 1;
background: red;
}
.box2 {
flex: 3;
background: orange;
}
.box3 {
flex: 2;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">flex:1</div>
<div class="box2">flex:3</div>
<div class="box3">flex:2</div>
</div>
</body>
</html>
行内元素的水平居中设置
text-align:center；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
border:1px solid red;
margin:20px;
}
.txtCenter{
text-align:center;
}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
</html>
定宽块状元素的水平居中设置
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
css引入方式：
内嵌式（内部样式表）：
行内样式表（只针对极小单元）：
外部样式表（link）：
取消表单的蓝色轮廓：
input{
outline：none；
}
取消文本域的拖拽：
textarea{
resize：none；
}
图片（块元素）与文字的对齐方式
vertical-align: baseline | top | middle | bottom
| 属性值 | 描述 |
|---|---|
| baseline | 元素在父级的基线上 |
| top | 把元素放在父级顶端对齐 |
| middle | 把元素放在父级中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
两个小技巧
将已知宽高的盒子水平垂直居中
- 利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
- 子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。
- 然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
将未知知宽高的盒子实现水平垂直居中
- 利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
- 子元素设置上和左偏移的值都为50%。
- 然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高不定实现盒子水平垂直居中</title>
<style type="text/css">
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
</body>
</html>
效果如下：
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
