唯一稳妥的事是去冒险一试。
The only safe thing is to take a risk.
文章目录
一、初识CSS
1.什么是css？
层叠样式表（ Cascading Stylesheet ，简称CSS ）， 其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。CSS的语法反映了这个目标，由下面两个部分构建： 属性（ property）是一个标识符，用可读的名称来表示其特性。 值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。
2.引入css的方式
- 外部样式
<head>
...
<!-- href="style.css"文件路径
rel="stylesheet"使用外部样式表
type="text/css"文件类型 -->
<link href="style.css" rel="stylesheet" type="text/css" />
...
</head>
- 内部样式
<style>
h1{color: green; }
</style>- 行内样式
<h1 style="color:red;">style属性的应用</h1>3.css选择器
- 基本选择器
- id选择器
/* #box box为id名
font-size属性
16px属性值 */
#box { font-size:16px;}- 类选择器
/* .main main为类名 */
.main { font-size:16px;}- 标签选择器
p { font-size:16px;}- 注：基本选择器的优先级：ID选择器>类选择器>标签选择器
二、CSS基础
1.编辑网页文本
- 字体样式 font
font-family——设置字体类型
例如：font-family:"隶书";
font-size——设置字体大小
例如：font-size:12px;
font-style——设置字体风格
例如：font-style:italic;
font-weight——设置字体的粗细
例如：font-weight:bold;
另外可设置所有字体属性：
font:italic bold 36px "宋体";- 文本样式
color——设置文本颜色
例如：color:red;
text-align——设置元素水平对齐方式
属性值： left/right/center/justify
left把文本排列到左边（默认值）
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
例如：text-align:right;
text-indent——设置首行文本的缩进
例如：text-indent:20px;
line-height——设置文本的行高
例如：line-height:25px;
text-decoration——设置文本的装饰
属性值： none/underline/overline/line-through
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
例如：text-decoration:underline;
vertical-align——垂直对齐方式
属性值：middle居中/top置顶/bottom置底
例如：vertical-align:top;
text-shadow——文本阴影
属性值：值1 值2 值3 值4
值1：color（颜色）
值2：x-offset（X轴位移，用来指定阴影水平位移量）
值3：y-offset（Y轴位移，用来指定阴影垂直位移量）
值4：blur-radius（ 阴影模糊半径，代表阴影向外模糊的模糊范围）
例如：text-shadow:red 20px 20px 5px;2.超链接伪类
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接伪类</title>
<style>
/* 未单击访问时超链接的字体是红色的 */
a:link{
color: red;
}
/* 单击访问后超链接的字体是绿色的 */
a:visited{
color:green;
}
/* 鼠标悬浮其上的超链接的字体是蓝色的 */
a:hover{
color:blue;
}
/* 鼠标单击未释放的超链接的字体是黄色的 */
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
</body>
</html>注：设置伪类的顺序：a:link——>a:visited——>a:hover——>a:active
3.列表样式 list-style
list-style-type——列表样式类型
属性值：none/disc/circle/aquare/decimal
none 无标记符号
disc 实心圆，默认类型
circle 空心圆;
square 实心正方形
decimal 数字
例如： list-style-type:circle;
list-style-image——将图像作为列表项标记
属性值：url图像的路径
例如： list-style-image:url("/i/arrow.gif");
list-style-position——列表样式位置
属性值：inside/outside
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
例如： list-style-position:inside;
另外可设置所有列表样式属性（不常用）：
list-style:square inside url('/i/arrow.gif');4.背景样式 background
background-color——背景颜色
属性值：transparent/color_name/hex_number/rgb_number
transparent默认。背景颜色为透明。
color_name规定颜色值为颜色名称的背景颜色（比如 red）
hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）
rgb_number规定颜色值为rgb代码的背景颜色（比如 rgb(255,0,0)）
例如：background-color:red;
background-image——背景图像
例如：background-image:url(./img.jpg);
background-repeat——背景重复方式
属性值：repeat/no-repeat/repeat-x/repeat-y
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
例如：background-repeat:no-repeat;
background-position——背景定位
属性值：Xpos Ypos/X% Y%/X Y
Xpos Ypos 单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词：垂直方向的关键词：top、center、bottom
水平方向的关键词：left、center、right
例如：background-position:center center;
background-size——背景尺寸
属性值：auto/percentage/cover/contain
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
例如：background-size:contain;
另外可设置所有背景样式属性：
background:#00FF00 url(bgimage.gif) no-repeat right top;5.css3渐变
- 线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
background:linear-gradient(position,color1,color2,…)——线性渐变
(渐变方向,第一种颜色值,第二种颜色值)
例如：从左侧开始的线性渐变，从红色开始，转为黄色:
background: linear-gradient(to right, red , yellow);- 径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
background:radial-gradient(color1,color2,…)——径向渐变
(第一种颜色值,第二种颜色值)
例如：从中心开始的径向渐变。起点是黑色，终点是红色:
background: radial-gradient(black,red); 三、盒子模型
1.盒子模型的使用
四个属性值按顺时针排列：上 右 下 左
- 边框 border
border-color——边框颜色
border-top-color 上边框颜色
例如：border-top-color:red;
border-right-color 右边框颜色
例如：border-right-color:red;
border-bottom-color 下边框颜色
例如：border-bottom-color:red;
border-left-color 左边框颜色
例如：border-left-color:red;
border-color 四个边框为同一颜色
例如：border-color:red;
border-color 上、下边框颜色：red,左、右边框颜色：blue
例如：border-color:red blue;
border-color 上边框颜色：red 左、右边框颜色：yellow,下边框颜色：blue
例如：border-color:red yellow blue;
border-color 上、右、下、左边框颜色：red、yellow、blue、green
例如：border-color:red yellow blue green;
border-width——边框粗细
属性值：thin（细）/medium（中）/thick（粗）/像素值
例如：border-width:2px;
border-style——边框样式
属性值：none/hidden/dotted虚线/dotted虚线/dashed点线/solid实线/double双边框
例如：border-style:solid;
另外可设置所有边框样式属性：
例如：border: 1px red dashed;- 内边距 padding
padding-top——上内边距
例如：padding-top:10px;
padding-right——右内边距
例如：padding-right:10px;
padding-bottom——下内边距
例如：padding-bottom:10px;
padding-left——左内边距
例如：padding-left:10px;
padding 上、右、下、左边为同一内边距
例如：padding:10px;
padding 上、下内边距：10px,左、右内边距：5px
例如：padding:10px 5px;
padding 上内边距：10px,左、右内边距：5px,下内边距：15px
例如：padding:10px 5px 15px;
padding 上、右、下、左不同的内边距：10px 5px 15px 20px
例如：padding:10px 5px 15px 20px;
padding 上、右、下、左相同的内边距：10px
例如：padding:10px;- 外边距 margin
margin-top——上外边距
例如：margin-top:10px;
margin-right——右外边距
例如：margin-right:10px;
margin-bottom——下外边距
例如：margin-bottom:10px;
margin-left——左外边距
例如：margin-left:10px;
margin 上、右、下、左边为同一外边距
例如：margin:10px;
margin 上、下外边距：10px,左、右外边距：5px
例如：margin:10px 5px;
margin 上外边距：10px,左、右外边距：5px,下外边距：15px
例如：margin :10px 5px 15px;
margin 上、右、下、左不同的外边距：10px 5px 15px 20px
例如：margin :10px 5px 15px 20px;
margin 上、右、下、左相同的外边距：10px
例如：margin :10px;
网页居中对齐：margin:0px auto;
另外：网页居中对齐的必要条件：块元素、固定宽度 - 盒子总尺寸
盒子模型总尺寸=border边框+padding内边距+margin外边距+内容宽高- box-sizing
box-sizing
属性值：content-box/border-box/inherit
content-box 默认值，盒子的总尺度
border-box 盒子的宽度或高度等于元素内容的宽度或高度
inherit 元素继承父元素的盒子模型模式
另外：box-sizing值为border-box时，盒子的大小不会受到边框和内边距的影响，如果边框和内边距的值相加超过盒子本身大小时，依然会失效2.圆角边框 border-radius
四个属性值按顺时针排列：上 右 下 左
上圆角边框20px,右圆角边框10px,下圆角边框5px,左圆角边框30px
例如：border-radius: 20px 10px 50px 30px;3.盒子阴影 box-shadow
box-shadow——盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
inset 阴影类型内阴影
x-offset（X轴位移，用来指定阴影水平位移量）
y-offset（Y轴位移，用来指定阴影垂直位移量）
blur-radius（ 阴影模糊半径，代表阴影向外模糊的模糊范围）
color（阴影颜色，定义绘制阴影时所使用的颜色）
例如：box-shadow:inset red 20px 20px 5px;
另外：box-shadow盒子阴影设置值：阴影颜色，x轴和y轴偏移量，模糊度，模糊范围，设置设置类似text-shadow四、浮动 float
1.网页布局
- 通常的网页布局
- 网站导航
- 左侧链接
- 主体内容
- 网页版权
- 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。
- 标准文档流组成
内联（行内）元素（inline）<span>、<a>、<img/>、<strong>...
块级元素（block）<h1>…<h6>、<p>、<div>、ul...
注：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
- 标准文档流组成
2.display属性
- display属性
display: block/inline/inline-block/none
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示
例如：display:inline-block;- display特性
-
块级元素与行级元素的转变
变为块级元素：display:block;
变为行级元素：display:inline; -
控制块元素排到一行
display: inline-block; -
控制元素的显示和隐藏
display:none;
-
3.浮动属性 float
float:left/right/none
左浮动：float:left;
右浮动： float:right;
不浮动： float:none;
4.清除浮动
clear——清除浮动
属性值：left/right/both/none
清除左浮动：clear:left;
清除右浮动：clear:right;
清除两侧浮动：clear:both;
不清除浮动：clear:none;5.使用dispaly:inline-block;和float使元素排在一行优缺点
- 使用
display:inline-block
优点：可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
缺点：位置方向不可控制，会解析空格。IE 6、IE 7不支持 - 使用
float
优点：可以让元素排在一行并且支持宽度和高度，可以决定排列方向
缺点：float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
五、定位 position
1.定位属性
position——定位
属性值：static/relative/absolute/fixed
例如：position:fixed;
1.static：默认值——没有定位，以标准流方式显示
2.relative：相对定位——相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
相对定位的特性：
1）相对于自己的初始位置来定位
2）元素位置发生偏移后，它原来的位置会被保留下来
3）层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景：
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
3.absolute：绝对定位——相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移,如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位,绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响,元素位置发生偏移后，它原来的位置不会被保留下来。
绝对定位不设置偏移量：
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
1）绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
2）元素位置发生偏移后，原来的位置不会被保留
3）层级提高，可以把标准文档流中的元素及浮动元素盖在下边
4）设置绝对定位的元素脱离文档流
绝对定位的使用场景：
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
4.fixed：固定定位——类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
偏移设置： left、right、top、bottom
固定定位的特性：
1）相对浏览器窗口来定位
2）偏移量不会随滚动条的移动而移动
固定定位的使用场景：
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
**注**：relative元素本身位置会保留下来，fixed和absolute位置不会保留，定位层级均会提高2.z-index属性
z-index属性：调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
使用：设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
注：z-index：设置已经有定位的元素层级默认为0，数值越大层级越高，可设置负值
3.透明度 opacity
opacity—透明度
使用：opacity:x;值为0~1，值越小越透明
例如：opacity:0.4;
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
