前端css

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

摘要：格式如下外部样式外部样式就是将写在一个多带带的文件中，然后在页面进行引入即可。浮动元素会生成一个块级框，而不论它本身是何种元素。允许浮动元素出现在两侧。

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

</>复制代码 
/*这是注释*/

注释是代码之母。

CSS的几种引入方式

行内样式

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

</>复制代码 
<p style="color: red">Hello world.p>

内部样式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

</>复制代码 
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p{
            background-color: #2b99ff;
        }
    style>
head>

外部样式

外部样式就是将css写在一个多带带的文件中，然后在页面进行引入即可。推荐使用此方式。

</>复制代码 
<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

基本选择器

元素选择器

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

ID选择器

</>复制代码 
#i1 {
  background-color: red;
}

类选择器

</>复制代码 
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器

</>复制代码 
* {
  color: white;
}

组合选择器

后代选择器

</>复制代码 
/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器

</>复制代码 
/*选择所有父级是  元素的  元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

</>复制代码 
/*选择所有紧接着元素之后的元素*/
div+p {
  margin: 5px;
}

弟弟选择器

</>复制代码 
/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器

</>复制代码 
/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

</>复制代码 
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

不怎么常用的属性选择器

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

</>复制代码 
div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

</>复制代码 
div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

</>复制代码 
.c1 p {
  color: red;
}

伪类选择器

</>复制代码 
/* 未访问的链接 */
a:link {
  color: #FF0000
}
/* 已访问的链接 */
a:visited {
  color: #00FF00
} 
/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 
/* 选定的链接 */ 
a:active {
  color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

first-letter

常用的给首字母设置特殊样式：

</>复制代码 
p:first-letter {
  font-size: 48px;
  color: red;
}

before

</>复制代码 
/*在每个元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

</>复制代码 
/*在每个元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动。

选择器的优先级

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

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

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

</>复制代码 
p {
  color: green;
}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

字体属性

文字字体

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

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

字重（粗细）

font-weight用来设置字体的字重（粗细）。

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

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

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

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

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

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

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

首行缩进

将段落的第一行缩进 32像素：

</>复制代码 
p {
  text-indent: 32px;
}

背景属性

</>复制代码 
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(1.jpg);
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

支持简写：

</>复制代码 
background:#336699 url(1.png) no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

参考链接点我

一个有趣的例子：

</>复制代码 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    style>
head>
<body>
    <div class="d1">div>
    <div class="box">div>
    <div class="d2">div>
    <div class="d3">div>
body>
html>

图片不动

边框

边框属性

border-width
border-style
border-color

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

通常使用简写方式：

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

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

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

</>复制代码 
#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

display属性

用于控制HTML元素的显示效果。

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

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

看图吧：

margin外边距

</>复制代码 
.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

</>复制代码 
.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

</>复制代码 
.mycenter {
  margin: 0 auto;
}

padding内填充

</>复制代码 
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

</>复制代码 
.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

参考示例

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

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

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

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
伪元素清除法
overflow:hidden

伪元素清除法（使用较多）：

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

overflow溢出属性

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

圆形头像示例

</>复制代码 
DOCTYPE HTML>
<html>
<head
                 
                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               前端css
                                                                                                           css前端
                                                                                                           前端css框架
                                                                                                           浮动-前端-css

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

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

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

MudOnTire 2019-08-21 18:25 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论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实例

CSS注释

</>复制代码

CSS的几种引入方式

行内样式

</>复制代码

内部样式

</>复制代码

外部样式

</>复制代码

CSS选择器

基本选择器

元素选择器

</>复制代码

ID选择器

</>复制代码

类选择器

</>复制代码

通用选择器

</>复制代码

组合选择器

后代选择器

</>复制代码

儿子选择器

</>复制代码

毗邻选择器

</>复制代码

弟弟选择器

</>复制代码

属性选择器

</>复制代码

</>复制代码

分组和嵌套

分组

</>复制代码

</>复制代码

嵌套

</>复制代码

伪类选择器

</>复制代码

伪元素选择器

first-letter

</>复制代码

before

</>复制代码

after

</>复制代码

选择器的优先级

CSS继承

</>复制代码

</>复制代码

选择器的优先级

CSS属性相关

宽和高

字体属性

文字字体

</>复制代码

字体大小

</>复制代码

字重（粗细）

文本颜色

文字属性

文字对齐

文字装饰

</>复制代码

首行缩进

</>复制代码

背景属性

</>复制代码

</>复制代码

</>复制代码

边框

</>复制代码

</>复制代码

</>复制代码