前端

番茄西红柿发布于2019-04-23 11:46 / 2906人阅读

摘要：在每个元素后面插入蓝色的选择器选择器向选定的元素之前插入内容。具体的选择器权重计算方式如下内联样式选择器类选择器元素选择器权重计算永不进位。

CSS简介

css指的是层叠样式表(Cascading Style Sheets).

CSS语法

CSS语法主要由两个部分组成：选择器和声明(一条或多条声明).

选择器一般是自己需要改变样式的HTML元素；每一条声明包括属性和属性值，属性和属性值之间用冒号(: )分开，每个声明后面用分号(;)结束.

CSS注释

注释是用来解释你的代码

CSS注释：/*注释内容*/

CSS的几种引入方式

1. 内联样式

内联样式是在标记的style属性中设定css属性。不推荐大规模使用。

</>复制代码 
<p style="margin: 20px">
blamekidd
p>

2. 内部样式表

当单个文档需要特殊的样式的时候，可以考虑使用内部样式表。

使用

滚动背景图示例

2. Text(文本)

2.1 文本对齐：text-align

text-align属性规定元素中的文本的水平对齐方式

值	描述
left	左对齐（默认值）
right	右对齐
center	居中对齐
justify	两端对齐(左右外边距是对齐)

</>复制代码 
div {
    text-align: center;
}

2.2 文本修饰：text-decoration

text-decoration属性用来给文本添加特殊效果。

主要是用来删除链接的下划线。不建议强调指出不是链接的文本，因为这常常混淆用户。

</>复制代码 
a {
    text-decoration: none;
}

其他属性值：

underline：定义文本下的一条线。

overline：定义文本上的一条线。

line-through：定义穿过文本下的一条线。

2.3 文本颜色：color

颜色属性用来设置文本的颜色。

</>复制代码 
h1 {
    color: red;
}

2.4 文本缩进：text-indent

text-indent属性用来指定文本的第一行的缩进。

</>复制代码 
/*将段落的第一行缩进32像素*/
p {
    text-indent: 32px;
}

3. Fonts(字体)

3.1 设置字体系列：font-family

font-family属性用于设置文本的字体系列

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可以识别的第一个值。

简单实例：

</>复制代码 
body {
    font-family: "Microsoft Yahei", "微软雅黑", "sans-serif";
}

3.2 设置字体大小：font-size

font-size属性设置字体的大小。

</>复制代码 
p {
    font-size: 10px;
}

3.3 设置字体粗细：font-weight

font-weight属性设置字体的粗细

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100-900	设置具体粗细，400等同于normal，700等同于bold
inherit	继承父元素字体的粗细值

4. 尺寸

width属性可以设置元素的宽度。块级标签才能设置宽度，内敛标签的宽度由内容来决定.

height属性可以设置元素的高度

所有CSS尺寸属性：

属性	描述
height	设置元素的高度
line-height	设置行高
max-height	设置元素的最大高度
min-height	设置元素的最小高度
width	设置元素的宽度
max-width	设置元素的最大宽度
min-width	设置元素的最小宽度

5. Border(边框)

边框属性：

border-width: 用于为元素的所有边框设置宽度，或者多带带地为各边边框设置宽度。

border-style: 用于设置元素所有边框的样式，或者多带带地为各边设置边框样式。

border-color: 设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

</>复制代码 
#b1 {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

一般使用简写形式：

</>复制代码 
#b1 {
    border: 2px solid red;
}

边框样式：

border-style属性用来定义边框的样式

border-style的值：

值	描述
none	默认无边框
dotted	定义一个点状边框
dashed	定义一个虚线边框
solid	定义实线边框
inset	定义一个3D的嵌入边框

除了可以统一设置边框，还可以多带带为某一个边框设置样式：

</>复制代码 
#d1 {
    border-top-style: solid;
    border-bottom-style: inset;
    border-top-style: red;
}

border-radius

用这个属性可以实现圆角边框的效果，圆形的头像框。

将border-radius设置为长或高的一半，border-radius: 50%;

6. Display(显示)

display属性控制一个元素应该怎么显示。

display的值：

值	描述
none	HTML中元素存在，但是在浏览器中不显示，且隐藏的元素不会占用任何的空间。一般用于配合JavaScript代码使用。
block	默认占满整个页面宽度。如果设置了指定宽度，则会用margin填充剩下的部分。
inline	按照行内元素显示。此时再设置元素的width、height、margin-top、margin-bottom、float属性都不会有什么影响。
inline-block	使元素同时具有行内元素和块级元素的特点

注意：

</>复制代码 
display属性设置一个元素应该怎么显示，
visibility属性指定一个元素是可见的还是隐藏的。
区别：
display: none -- 隐藏一个元素，且隐藏的元素不会占有任何空间。
visibility: hidden -- 隐藏一个元素，但是隐藏的元素仍然占用与未隐藏之前一样的空间。
也就是说该元素虽然被隐藏了，但是仍然会影响布局。

7. CSS盒子模型

所有 HTML模型都可以看作盒子。它包括外边距、边框、内边距、实际内容。

说明：

margin(外边距)：用于控制元素与元素之间的距离。margin最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。外边距是透明的。

border(边框)：围绕在内边距和内容外的边框。

padding(内边距)：用于控制内容和边框之间的距离，内边距是透明的。

content(实际内容)：盒子的内容，主要用来显示文本和图像

8. Margin(外边距)

它接受任何长度单位、百分数值以及负数。

margin属性的值：

值	描述
auto	设置浏览器的边距，这样做的结果会依赖浏览器。
length	定义一个固定的margin。
%	定义一个使用百分比的边距。

</>复制代码 
.margin-text {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 50px;
}

</>复制代码 
当使用简写时：
margin: 20px 30px 40px 50px;
顺序为：上 右 下 左
-----------------------------------------
margin: 20px 30px 40px;
顺序为：上 左右 下
-----------------------------------------
margin: 20px 30px;
顺序为：上下 左右

</>复制代码 
/* 常见居中 */
.mycenter {
    margin: 0 auto;
}

9. Padding(内边距、填充)

元素的内边距指的是在边框和内容之间。

</>复制代码 
.padding-text {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;
}

</>复制代码 
/* 当使用简写时，顺序和margin一样 */
padding: 20px 30px 40px 50px;
顺序为：上 右 下 左
/* ---------------------------------------- */
padding: 20px 30px 40px
顺序为：上 左右 下
/* ---------------------------------------- */
padding: 20px 30px;
顺序为：上下 左右

10. Float(浮动)

在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，无论它是何种元素。

浮动的特点：

float会使元素向左或者向右移动，浮动元素之后的元素将围绕它；浮动元素之前的元素将不会受到影响。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

元素设置水平方向浮动，意味着元素只能左右移动而不能上下移动。

三种取值：

left：向左浮动

right：向右浮动

none：默认值，不浮动

更多详细介绍

11. Clear(清除浮动)

clear属性指定元素的某一侧不能有浮动元素。

元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以使用clear属性。

值	描述
none	默认值，允许浮动元素出现在两侧
left	在左侧不允许出现浮动元素
right	在右侧不允许出现浮动元素
both	在左右两侧均不允许出现浮动元素
inherit	从父元素继承clear属性的值

注意：clear只会对自身起作用，不会影响其他元素。

清除浮动的副作用：

主要有三种方式：

1. 固定高度

2. 伪元素清除法

3. overflow: hidden

其中，伪元素清除法使用较多：

</>复制代码 
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

12. Overflow(溢出)

overflow 属性可以控制内容溢出元素框时在对应的元素区间内如何显示。

值	描述
visible	默认值，内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以查看其余的内容。
auto	如果内容会被修剪，则浏览器会显示滚动条以查看其余的内容。
inherit	从父元素继承overflow属性的值

overflow: 水平垂直都设置

overflow-x: 设置水平方向

overflow-y: 设置垂直方向

圆形头像示例

</>复制代码 
DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆形头像title>
    <style>
        body {
            margin: 0;
        }
        .ava {
            width: 200px;
            height: 200px;
            border: 2px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        .ava>img {
            max-width: 100%;
        }
    style>
head>
<body>
<div class="ava">
    <img src="http://img3.duitang.com/uploads/item/201506/30/20150630195944_VJhkw.thumb.700_0.jpeg" alt="">
div>
body>
html>

圆形头像示例

13. Position(定位)

position属性指定了元素的定位类型。

13.1 static定位

默认值，没有定位

13.2 fixed定位

固定。元素的位置相对于浏览器的窗口是固定位置。即使窗口滚动它也不会移动。

fixed的定位使元素位置与文档流无关，所以不占据空间。

fixed定位的元素会和其它元素重叠。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

</>复制代码 
DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 1500px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .back-top {
            text-align: center;
            background-color: bisque;
            padding: 10px;
            position: fixed;
            right: 10px;
            bottom: 20px;
        }
    style>
head>
<body>
<div class="c1">123div>
<div class="back-top">返回顶部div>
body>
html>

返回顶部按钮示例

13.3 relative定位

相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。但是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

13.4 absolute定位

绝对定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

14. z-index

</>复制代码 
#d1 {
    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="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框title>
    <style>
        .modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }
        .cover {
            position: absolute;
            width: 700px;
            height: 380px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top: -190px;
            margin-left: -350px;
            z-index: 100;
        }
    style>
head>
<body>
<div class="modal">div>
<div class="cover">div>
body>
html>

自定义模态框示例

15. opacity(不透明度)

opacity属性用来定义透明效果。取值范围是0~1,0是完全透明，1是完全不透明

</>复制代码 
div {
    opacity: 0.5;
}

顶部导航菜单示例

</>复制代码 
DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*

GPU云服务器云服务器前端前端前端编程前端前端培训前端前端前端学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1142.html

王下邀月熊_Chevalier的前端每周清单系列文章索引

摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。感谢王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...

2501207950 2019-08-22 14:53 评论0 收藏0
前端每周清单年度总结与盘点

摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了...

jackwang 2019-08-22 15:54 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
我眼中的前端开发

摘要：狭义上的前端开发让我们先从狭义上的前端开始讨论吧。这是我们就需要把视野打开，成为广义上的前端。比起移动端开发，前端开发有着免审核，开发迅速，统一维护等好处。这也导致前端开发可被替代性强，待遇自然也上不去。大家都知道程序员是少见的低门槛高工资的职业，而前端工程师又比其他岗位入门更快，因此，很多人都想成为一个前端工程师。但是，在决定成为一个前端工程师之前，你了解前端是什么吗？一千个人眼...

suxier 2019-08-22 16:30 评论0 收藏0
前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师

我要关注我要私信

TA的文章

tensor

阅读 937·2023-04-25 19:43
Windows 下安装 XGBoost

阅读 4231·2021-11-30 14:52
Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

阅读 4020·2021-11-30 14:52
VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

阅读 4127·2021-11-29 11:00
百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

阅读 4019·2021-11-29 11:00
Linux系统和宝塔面板如何启用禁ping功能?

阅读 4141·2021-11-29 11:00
301重定向怎么做?301重定向设置方法有几种

阅读 3868·2021-11-29 11:00
wordpress网站重定向次数过多的解决方法

阅读 6745·2021-11-29 11:00

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

前端

CSS简介

CSS语法

CSS注释

CSS的几种引入方式

1. 内联样式

</>复制代码

2. 内部样式表

2. Text(文本)

2.1 文本对齐：text-align

</>复制代码

2.2 文本修饰：text-decoration

</>复制代码

2.3 文本颜色：color

</>复制代码

2.4 文本缩进：text-indent

</>复制代码

3. Fonts(字体)

3.1 设置字体系列：font-family

</>复制代码

3.2 设置字体大小：font-size

</>复制代码

3.3 设置字体粗细：font-weight

4. 尺寸

5. Border(边框)

边框属性：

</>复制代码

</>复制代码

边框样式：

</>复制代码

border-radius

6. Display(显示)

注意：

</>复制代码

7. CSS盒子模型

8. Margin(外边距)

</>复制代码

</>复制代码

</>复制代码

9. Padding(内边距、填充)

</>复制代码

</>复制代码

10. Float(浮动)

三种取值：

11. Clear(清除浮动)

清除浮动的副作用：

</>复制代码

12. Overflow(溢出)

圆形头像示例

</>复制代码

13. Position(定位)

13.1 static定位

13.2 fixed定位

</>复制代码

13.3 relative定位

13.4 absolute定位

14. z-index

</>复制代码

</>复制代码

15. opacity(不透明度)

</>复制代码

顶部导航菜单示例

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动