前端CSS样式操做
目录css
字体和文字
设置标签的宽高
只有块级标签才能够设置宽高。html
行内标签设置长宽以后不生效，取决于内部文本值。浏览器
/*块级标签设置宽度、高度*/
div {
width: 200px;
height: 400px;
}
/*行内标签设置宽度、高度无效*/
字体属性
/*给字体设置属性*/
p {
font-family: "KaiTi", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: lighter;
color: red;
color:#352AFF;
color: rgb(185,126,255);
color: rgba(185,126,255,0.5);
}
font-family：设置字体样式，若是浏览器不支持第一个字体，则会尝试下一个字体样式布局
font-size：设置字体大小字体
font-weight：设置字体的字重（粗细）网站
color：设置字体颜色，能够有三种方法获取颜色url
一、打开Pycharm画板选中想要的颜色，直接写十六进制。翻译
二、直接写颜色的英文3d
三、写rgb值：软件截图下面有rgb值。code
四、rgba值：也是rgb值，四个参数，最后一个参数写对比度（0~1）0是透明，1是不透明
字重（粗细）：
font-weight 用来设置字体的字重（粗细），有以下参数：
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体的粗细，400=normal，700=bold |
文字的属性
<style>
p {
font-weight: bolder;
font-size: 30px;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-indent: 48px;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
}
a {
text-decoration: none;
}
a:hover {
color: black;
}
</style>
文字对齐 text-align
text-align： 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左对齐，默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰 text-decoration
text-decoration属性用来给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认的文本 |
| underline | 文本下划线 |
| overline | 文本上划线 |
| line-through | 文本删除线 |
经常用于去掉 a标签默认的下划线。
a {text-decoration: none;}
首行缩进 text-indent
将段落的第一行缩进 32像素
p {text-indent: 48px;}
背景属性
背景图片
<style>
div {
width: 1000px;
height: 1000px;
background-color: orange;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: 10px 50px;
background-position: center center;
background: url("111.jpg") red no-repeat center right;
}
</style>
background-color：背景色，能够填颜色英文单词、十六进制、rgb、rgba
background-image：
url()填写图片的路径background-position：定义图片的位置。
background-repeat：定义图片平铺方式
repeat：默认值，背景图片平铺整个背景。
repeat-x：背景图片在水平方向上平铺
repeat-y：背景图片在垂直方向上平铺
no-repeat：背景图片不平铺，只显示一张
支持简写：图片地址、背景色、平铺方式、图片位置
background: url("111.jpg") red no-repeat center right;
背景图片应用场景：
全部浏览器你可以看到的都是走网路请求传输过来的
当你的网站须要用到不少小图标的时候，能够将全部的小图片放在一张图片上，而后经过背景图片的位置来控制显示哪个小图片，从而节省加载资源
如今，通常直接将图片转化为文字代码来传输，再将文字代码翻译为图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("111.jpg") red no-repeat center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumaquamarine;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
边框
边框 border 后面写三个参数：
- border-color：边框的颜色
- border-style：边框的样式
- border-width：边框的宽度
属性能够简写，位置无顺序
border: 3px solid black
也能够以单独设置样式、颜色、粗细
p {
border-left: 3px solid red;
border-bottom: 5px dotted green;
border-top: 1px dashed orchid;
border-right: 10px solid dimgrey;
border-style: dot-dash;
border-color: red;
}
边框的样式：
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩阵虚线边框 |
| solid | 实线边框 |
画圆
画圆：先画边框，其次调整圆角度数。
border-radius：50% 能够经过这个参数来控制圆角的度数
若是宽和高同样，那么就是个圆形
若是不同，那么不必定是椭圆。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid black;
background-color: red;
height: 400px;
width: 400px;
/*border-radius: 20px;*/
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
display属性
display属性用于控制HTML元素的显示效果
| 值 | 描述 |
|---|---|
| none | 隐藏元素 |
| block | 将行内标签变成块级标签 |
| inline | 将块级标签变成行内标签 |
| inline-block | 既能够设置长宽，又能够在一行里面展现 |
| visibility:hidden | 隐藏元素 |
虽说none参数能够隐藏某个元素，另一个选择器也能够隐藏属性：
visibility: hidden：隐藏某个元素以后，元素所占的空间不会被释放
display：none：隐藏某个元素以后，元素所占的空间会被释放，下面的元素会顶替，可能会影响布局
盒子模型
首先说一下谷歌浏览器 有一个特色，body内默认有8px的外边距，咱们能够写在css样式中通用的样式：
body {margin:0}
以快递盒为例 形容一下盒子模型：
- 外边距（margin）：快递盒与快递盒之间的距离，用于控制标签与标签之间的距离
- 边框（border）：快递盒的厚度
- 内边距（padding）：快递盒内物品与快递盒子之间的距离，用于控制文字内容与标签之间的距离
- 内容（content）：快递内容，显示的文本和图像
外边距 margin
上下左右外边距
margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;
推荐使用简写：
body {
margin: 0; 只写一个参数，上下左右外边距所有调整
margin: 10px 15px; 写两个参数，第一个参数控制的上下，第二个参数控制左右
margin: 10px 20px 30px; 写三个参数，1：上，2：左右，3：下
margin: 10px 20px 30px 40px; 写四个参数，顺时针，上右下左所有控制
}
内边距 padding
上下左右内边距
padding-bottom: 100px; padding-top: 100px; padding-left: 100px; padding-right: 100px;
推荐使用简写
padding: 0; 只写一个参数，上下左右外边距所有调整 padding: 10px 15px; 写两个参数，第一个参数控制的上下，第二个参数控制左右 padding: 10px 20px 30px; 写三个参数，1：上，2：左右，3：下s padding: 10px 20px 30px 40px; 写四个参数，顺时针，上右下左所有控制
浮动
在CSS中，任何元素均可以浮动，主要用于页面布局。
浮动是脱离文档流的，不会遵循块级独占一行的特色。
浮动元素会生成一个块级框，不论它自己是什么元素。
关于浮动的两个特色：
浮动的框是能够向左 或 向右移动，知道它的外边缘碰到包含框或另外一个浮动框的边框为止。
因为浮动框不在文档的普通流中，因此文档的普通流中的快框表象的就像浮动框不存在同样，也就是说浮动会形成父标签塌陷。
请看下图，当把框 1 向右浮动时，它脱离文档流而且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流而且向左移动，直到它的左边缘碰到包含框的左边缘。由于它再也不处于文档流中，因此它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
若是把全部三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
以下图所示，若是包含框太窄，没法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。若是浮动元素的高度不一样，那么当它们向下移动时可能被其它浮动元素“卡住”：
浮动有三种方式：
- left：向左浮动
- right：向右浮动
- none：默认值，不浮动
clear清除浮动
clear属性规定元素的哪一侧不容许其余浮动元素。
clear属性只对自身起做用，不会影响其余元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不容许浮动元素 |
| right | 在右侧不容许浮动元素 |
| both | 在左右两侧不容许浮动元素 |
| none | 默认值，容许浮动元素出如今两侧 |
清除浮动有三种方式：
- 固定高度伪
- 元素清除法（使用较多）
overflow:hidden
.clearfix:after {
content: ' ';
clear: both;
display: block;
}
哪里塌陷了，就给那个标签加一个clearfix类属性便可。
若是给当前标签加没有效果，那么能够考虑给目标标签外层再套一个div，而后给这个新的div加。
浮动的应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
float: left;
width: 20%;
height: 1000px;
background-color: red;
}
.c2 {
float: right;
width: 80%;
height: 1000px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
overflow溢出属性
div {
height: 50px;
width: 50px;
border: 3px solid black;
/*overflow: hidden;*/
overflow: auto;
}
| 值 | 描述 |
|---|---|
| visible | 默认值，内容不会被修剪，呈如今元素框以外 |
| hidden | 超出的内容会隐藏（能够作圆形头像） |
| scroll | 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容 |
| auto | 若是内容被修剪， |
- overflow（水平和垂直均设置）
- overflow-x （设置水平方向）
- overflow-y （设置垂直方向）
作圆形头像例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color:#418899 ;
}
.c1 {
width: 400px;
height: 400px;
border: 3px solid white;
overflow: hidden;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="c1">
<img src="111.jpg" alt="">
</div>
</body>
</html>
定位 position
全部的标签默认都是静态的，没法直接经过 （top:10px; right:10px; bottom, left）调节位置，须要将其设置成可定位状态。
- 默认无定位
- 相对定位：至关于标签自身原来的位置，即静态下的位置。
- 绝对定位：子标签至关于已经定位过的父标签
- 固定定位：相对于浏览器窗口，固定在某个位置，好比回到顶部。
无定位 static
static 默认值，无定位，不能看成绝对定位的参照物，而且设置标签对象的top：10px ;right:10px，bottom，left等值并无毛用
相对定位 relative
position:relative;
相对定位是相对于该元素在文档流中的原始位置，即以本身原始位置（无定位时位置，上图为原始位置）为参照物
有趣的是，即便设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠经过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
.c1 {
width: 100px;
height: 100px;
background-color: gold;
position: relative;
left: 100px;
top: 100px;
}
绝对定位 absolute
position:absolute;
定义：设置为绝对定位的元素框从文档流彻底删除，并相对于最近的已定位祖先元素定位（必须是祖先，通常是父标签）
若是元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：若是父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，而后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠经过z-index属性定义。
.c2 {
position: relative;
height: 500px;
width: 200px;
background-color: black;
}
.c3 {
position: absolute;
height: 200px;
width: 800px;
top: -50px;
left: 200px;
background-color: pink;
}
固定定位 fixed
fixed：对象脱离正常文档流，
使用top，right，bottom，left（不配合使用没毛用）等属性以整个窗口为参考点进行定位，如：position:fixed;bottom:10px; right:10px;即为当前页面右下角
当出现滚动条时，对象不会随着滚动。而其层叠经过z-index属性 定义。
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，由于这是两个不一样的流，一个是浮动流，另外一个是“定位流”。可是 relative 却能够。由于它本来所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
示例代码：（网页返回顶部按钮样式）
.c2 {
border: 5px solid black;
background-color: pink;
position: fixed;
bottom: 50px;
right: 50px;
}
是否脱离文档流？
脱离文档流的
绝对定位
固定定位
浮动
不脱离文档流的
相对定位
z-index
#i2 {z-index: 999;}
设置对象的层叠顺序
- z-index 值表示谁压着谁，数值大的压着数值小的。
- 只有定位了的元素，才能有z-index，也就是说，无论相对定位，绝对定位，固定定位，均可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数。默认的z-index值为0若是你们都没有z-index值，或者z-index值同样，那么谁写在html后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
background-color: rgba(128,128,128,0.4);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.modal {
background-color: white;
z-index: 1000;
position: fixed;
height: 200px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>我是最底下的被压着那个</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>
username：<input type="text">
</p>
<p>
password：<input type="text">
</p>
<p>
提交：<input type="submit">
</p>
</form>
</div>
</body>
</html>
透明度
用来定义透明效果，取值范围是0~1，0是彻底透明，1是彻底不透明
比背景色透明度更牛逼。
- 1. CSS 样式背景操做
- 2. 前端基础-JQuery操做样式
- 3. 【Web 前端】CSS样式
- 4. 前端css公共样式
- 5. Python 前端CSS样式
- 6. 前端之css样式01
- 7. ［前端］HTML样式----CSS
- 8. JQuery中操做Css样式的方法
- 9. CSS样式之操做属性一
- 10. jquery操做css样式的方法
- 更多相关文章...
- • Web 品质 - 样式表 - 网站品质教程
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 委托模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS 样式背景操做
- 2. 前端基础-JQuery操做样式
- 3. 【Web 前端】CSS样式
- 4. 前端css公共样式
- 5. Python 前端CSS样式
- 6. 前端之css样式01
- 7. ［前端］HTML样式----CSS
- 8. JQuery中操做Css样式的方法
- 9. CSS样式之操做属性一
- 10. jquery操做css样式的方法