前端之CSS

raise_yang 发布于2019-04-23 13:22 / 490人阅读

摘要：不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。当滚动元素时，背景会随之滚动。

一.css三种引用方式
- 1.行间式
- 2.内联式
- 3.外联式
- 4.三种方式的优先级
二.样式与长度颜色
- 1.基本样式
- 2.长度
- 3.颜色
三.常用样式
- 1.字体样式
- 2.文本样式
- 3.背景样式
四.CSS选择器
- 1.基础选择器
- 2.基础选择器优先级

一.css三种引用方式

1.行间式

1.在标签头部的style属性内
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开




    
    Document

2.内联式

1.在style标签内(style标签一般作为head的子标签)
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}




    
    Document

3.外联式

1.在外部css文件中
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}
6.将html与css文件建立联系,通过link标签链接外部css(一般出现在head中)




    
    Document

css文件(01.css)

div{
    width: 200px;
    height: 200px;
    background-color: green;
}

4.三种方式的优先级

三种方式间没有优先级,三种方式协同布局,不重复的属性都可以存在,重复的属性采用覆盖赋值,保留最后位置的属性值,行间式一定是逻辑上最后被解析的,!important会影响解析顺序.

二.样式与长度颜色

1.基本样式

2.长度

px:像素(pixel),屏幕上显示的最小单位
mm:毫米
cm:厘米
in:英寸
pt:点(point),一个标准的长度单位,1in = 72pt
em:相对长度,1em=16px

推荐使用px(像素)作为网页制作单位

3.颜色

英文单词:如red,green,yellow等
rgb():r表示red,g表示green,b表示bule,色彩三原色,三个值可为[0-255]数值或百分比,以逗号相隔
rgba():前三个值可为像素或百分比,最后一个为[0,1]数值,表示透明度
hsl():h为Hue,表示色相,s为Saturation,表示饱和度,l为Lightness,表示明度,第一个值为[0,360]数值,后两个值为百分比
在#后跟六个十六进制数,如#AABBCC,每两位一整体,分别表示色彩三原色,可以简写为#abc

三.常用样式

1.字体样式

font-size:字体大小
font-weight:字重,就是字体粗细 bold加粗/normal正常/lighter加细/100~900
line-height:行高.设置时大于等于字体大小,字体在行高中垂直居中显示
font-style:字体风格 normal正常/italic斜体
font-family:字族,设置字体类型,可设置多个值,如果前面的字体不存在或不起作用,会选择后面的字体
font:字重风格大小/行高字族

2.文本样式

color:文本颜色
text-decoration:字划线 underline下划线/line-through中划线/overline上划线
letter-spacing:字间距
word-spacing:词间距
text-align:文本对齐方式.横向排列 left居左/center居中/right居右
vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象底端对齐

word-break:自动换行 normal默认换行规则/break-all允许在单词内换行
text-transform:英文字母大小写的转换 capitalize首字母大写/upercase所有字母大写/lowercase所有字母小写
text-indent:可以控制段落的首行缩进与缩进的距离
margin:设置段落之间的距离

3.背景样式

background-color:设置背景颜色

background-image:指定在元素的背景中出现的背景图片

background-repeat:背景重复,通常配合background-image使用 no-repeat图片不重复/repeat-x图片水平地重复/repeat-y图片垂直地重复

background-position:背景定位,该属性将使用两个通过空格分隔的值,指定了图像的水平(x)和垂直(y)坐标,该属性可以接收不同的值类型

background-position:200px 25px
background-position:60% 35%
/*关键字 top|bottom|left|right|center*/
background-position:right top

background-attachment:背景附着

background-attachment:scroll|fixed|local;
scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。
fixed: 不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。
local:当滚动元素时，背景会随之滚动。

background:背景简写,将背景属性设置在一个声明中

body {
  background:
     url(a.jpg)               /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

四.CSS选择器

1.基础选择器

通配选择器

匹配文档中所有标签,指html.body以及body中所有具有显示效果的标签.

*{
    border:solid
}

标签选择器

匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div

div{
    color:green;
    font-size:20px;
}

类选择器

匹配文档中所有拥有class属性且class属性值为类选择器名的标签

.red{
    color:red
}
如:会匹配red类选择器

id选择器

匹配文档中所有拥有id属性且属性值为id选择器名的标签

#div{
    text-align:center;
}
如:
均会匹配到名为div的id选择器

2.基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

GPU云服务器云服务器前端css css前端前端css框架浮动-前端-css

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

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

【前端Talkking】CSS系列——CSS深入理解之relative定位

摘要：前言在前面的两篇文章深入理解之浮动和深入理解之定位中，介绍了和的特性和使用方法，如果大家仔细阅读完了这两篇文章，相信你的打怪技能又提高的一大截，那么趁着自己最近状态不错，就多给大家分享点自己平时所学的技能。 1.前言在前面的两篇文章：CSS深入理解之float浮动和CSS深入理解之absolute定位中，介绍了float和absolute的特性和使用方法，如果大家仔细阅读完了这两篇文...

魏宪会 2019-08-29 15:25 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
前端之CSS基础学习

摘要：上面五个问题就是我总结的基础概念，学习过程中一定要把它们弄明白别忘了有哦。请带着以下几个问题进行学习 CSS是什么 CSS的引用方式 CSS选择器 CSS优先级 CSS盒模型基础知识学习和实例演练教程 MDN中css教程CSS基础学习教程（css快速入门）CSS参考手册（便于了解更多css属性）CSS3教程（适用于移动端开发的css新特性）入门学习，一定要快，没有必要花大量时...

Hwg 2019-08-29 12:32 评论0 收藏0
前端编码规范之：样式（scss）编码规范

摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。前端编码规范之：Git使用规范前端编码规范之：样式（scss）编码规范前端编码规范之：HTML结构规范前端编码规范之：Vue最佳实践前端编码规范...

reclay 2019-08-29 16:58 评论0 收藏0
前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.

摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

sean 2019-08-22 13:57 评论0 收藏0