【Java成王之路】EE初阶第十九篇: 前端三剑客 CSS基础篇

CSS 是什么

层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离. 

基本语法规范

CSS代码,由两部分构成

选择器{

属性:值

}

选择器:决定针对哪个元素进行修改.

属性和值都是针对被选中的元素进行的.

 注意: CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

引入方式 

内部样式表

写在 style 标签中. 嵌入到 html 内部. 理论上来说 style 放到 html 的哪里都行.

但是一般都是放到 head 标签中.

优点: 这样做能够让样式和页面结构分离.

缺点: 分离的还不够彻底. 尤其是 css 内容多的 

行内样式表

通过标签的 style 属性来设置样式.

不需要写选择器了(只是针对当前标签生效) 

最大的问题在于,不能写太复杂的样式.写复杂了,其实就非常难以阅读.

行内样式的优先级比内部样式要高.

如果两边同时尝试设置不同的属性值,行内样式覆盖内部样式.

(style 属性 比 style 标签,优先级高)

效果

外部样式表

当CSS进一步的复杂了之后,就可以把CSS单独放到一个文件中.

然后在tml中单独引入!

 

 使用link标签来引入一个外部的CSS.link href 属性描述了 css 的位置.

rel 属性表示引入的文件类型.stylesheet 就表示 "样式说明",说明引入的是一个 CSS文件

没有 rel 属性也可以~~默认就是样式表. 

外部样式和内部样式的优先级相同.

具体是谁生效,取决于其他的规则了.

外部样式写的代码,如果代码修改了,不一定会立即生效!!!(受限于浏览器缓存的影响)

实际开发中,会主要使用外部样式的方式来实现样式.

当浏览器首次访问网站的时候,就会下载这些CSS到本地.

后面第二次在访问的时候,这些CSS就不必重新下载了(浏览器的缓存)

存在的意义就是为了提高访速度.(这些css大概率是不变的)

但是如果真的出现了需要修改CSS样式,咋办?

只要强制让浏览器刷新就行了,就会强制从服务器重新下载CSS(ctrl + F5)

对于专业人士,知道如何强制刷新.

对于大部分小白来说,这咋整??

实际开发中,采取的正确思路是,如果css文件修改了,就改一下css文件的名字.

此时浏览器在加载css时候发现这个新的css文件在之前没有缓存过(是否缓存过使用文件名来区分的)

就能保证新版本的css一定会被浏览器加载!!

例:

第一次发布的版本1.css html link href = "1.css"

用户浏览器缓存了1.css

后面修改了代码,把css改了.

html link href = "2css",同时把1.css 重命名为2. css

此时用户浏览器就发现,当前缓存的是1.css,2.css没有缓存,于是就重新从服务器下载2.css了.

直接使用第三方打包工具(例如:webpack.....)

就能主动的修改文件名(每次改了代码生成新的文件)

语法细节

开发阶段,一般建议写成这种风格,可读性比较好.

部署阶段,一般采用这种风格,减少不必要的空格/缩进/换行,达到了节省带宽的效果.

(时刻牢记,真实的网站,css是从服务器下载到浏览器的.css代码越长,要下载的内容就越多,就越消耗带宽!!!) 

搭建一个网站,哪个硬件资源的成本最高的?

CPU?内存?硬盘?如果是一个小型网站,这三个都占用不多.带宽其实成本是最高的.(现在比以前好多了)

由于css和js都是需要下载到浏览器本地的~因此就非常的吃带宽.

这些内容都尽量"压缩"一下.

样式大小写

CSS里面不区分大小写,在起名字的时候,记不太好使用驼峰命名法.

在CSS里面countNum和countnum是一样的.....

在CSS中对于复杂的名字一般都是使用"脊柱命名法"

编程语言常见的命名格式:

1.驼峰命名法:最常见的Java,JS,C++....

2.蛇形命名法:通过下划线来分割单词.C语言/C++  count_num

3.脊柱命名法:通过 - 来分割单词. CSS font-size  (比较少见,大部分编程语言,不能使用 - 作为变量名的一部分)

4.匈牙利命名:类似于驼峰,但是会加上一个前缀,表示类型  iCountNum(整型变量) sName(字符串类型变量)...... 

空格规范

冒号后面带空格

选择器和 { 之间也有一个空格. 

对于代码的编程规范,不同的公司会有不同的要求.

CSS选择器

选中某个或者某一类元素.

(先选中,在操作)

 好比(mysql,先use数据库,然后再增删改查)

CSS里面支持很多种不同风格的选择器.这些选择器搭配使用,就可以随心所欲的选择任意的元素.

这个选择器非常重要!不仅仅是前端开发会用到,开发爬虫,开发自动化测试代码,都会经常用到.

https://www.w3school.com.cn/cssref/css_selectors.asp

基础选择器

1.标签选择器,选中一类标签.

例如选中p标签,就会让当前页面所有的p标签都会选中!!

选择器部分,直接写标签名,此时所有的p标签都会带有这个样式.

范围太大了,有的时候.希望只修改其中的一个元素,其他元素不修

类选择器 

在CSS中创建"类"通过这个类来手动之欧东哪些元素要遵守该样式.

这里的类指的是元素的class属性,和Java的class没有任何关系

此处仅仅是一个"分类的效果",和抽象,面向对象这些无关!

点开头表示是类,点后面的部分,是类的名字.

在具体要应用选择器的元素上,通过class属性来引入.引入的时候不需要加点

类选择器一般就是有一些元素都需要使用相同样式的时候使用.\

就可以给多个元素都引用同一个类.

一个类可以被多个标签使用.

一个标签也可以使用多个类. 

 

通过风格来风格多个类

这个是用的最多的选择器.

id选择器

每个html元素都有一个id属性.要求这个属性是整个页面中唯一的值.

也可以通过这个值来找到对应的元素.

id选择器在创建的时候要#开头.

引用时候,id属性中不需要#

id选择器相当于是按照"身份证号 "来找

类选择器相当于按照"类别"来找,一个类别下可以有很多元素,一个元素也可以属于多个类别(多对多关系)

通配符选择器

*{

}

选中页面所有元素

使用的少一些,存在的意义往往是"消除浏览器默认样式"

一般是清空内外边距.

不需要被元素引用

复合选择器 

把上述基础选择器组合了一下,达到了一个更精准更快速的定位元素的效果

1.后代选择器

现指定一个父元素,然后再指定一个子元素.

希望把有序列表中的文字(下半部分),颜色设为红色

"后代"指的不一定是子元素,也可以是孙子元素

ol是li的父元素

li是ol的子元素

li里面又有一些标签,孙子元素

 后代选择器不一定非得是标签选择器的组合,也可以是任意基础选择器的组合.

 

后代选择器也可以有很多层.

先找到类名为list的元素,然后再找到里面的li标签,再 找到里面的a标签

li 不一定是 .list的子元素,也可以是孙子元素等.

a也不一定是li的子元素,也可以是孙子元素等.

2.子选择器

只能选中子标签

元素1 > 元素2{

属性:值

}

先找元素1,然后在元素1里面找元素2,元素2必须是元素1的子元素,不能是孙子元素.....

3.并集选择器

一次选中多个标签

元素1,元素2{

属性:值;

} 

当前元素1和元素2都共同被设置了一样的样式.

其实相当于样式的更简化的写法了.

同时元素1和元素2都可以是一些复杂的选择器.

4.伪类选择器

这是一个范围很大的概念,伪类选择器,有很多种 ,介绍其中一些比较常用的.

4.1链接伪类选择器.和a标签搭配使用.根据a标签的状态来选择.

a标签的几种状态:

1.未被访问过:  :link

2.已经被访问过:  :visited

3.鼠标悬停:  :hover

4.活动链接(点下去之后,没松手):  :active

带:冒号的就是"伪类选择器"

实际写代码的时候,最常用的是hover,其次是active. 

这俩不仅仅是针对a标签生效.针对其他标签也能生效

 

特殊针对a标签.

4.2:force 伪类选择器

表示获取焦点的时候被选中.      windows系统的概念

尤其是针对输入框,就需要知道哪个输入框是获取到了焦点.

常用元素属性 

CSS最核心的就是,都有哪些属性,以及每个属性都有哪些值.

要能够随心所欲的使用CSS,需要大量练习.主要是为了熟悉有哪些属性,以及能达到哪

参考文档CSS 参考手册 (w3school.com.cn)

当前看到的文档中所表示的属性,其实都是"标准"规定的属性.

除了这些之外,浏览器还可能会有一些扩展的属性.(不同的浏览器扩展的属性可能还不一样)

1.字体属性

1.1.设置字体类型

fort-family 来设置字体的类型(宋体,隶书,微软雅黑)

在body中设置了字体,但是在刚才的div中也能生效

font相关的 CSS 属性是可以被"继承"的.

子元素会自动的继承父元素的相关属性.

如果是在body中设置的字体,由于body就是该页面的次顶层元素(仅此html)了,页面中的其他元素也都会继承这个字体.

如果需要在某个元素中使用不同的字体,就可以针对这个元素来单独设置字体.

此时设置的新字体样式会覆盖继承自父元素的字体.

设置字体的时候,要注意,得保证用户的计算机上一定有这种字体(如果没有,可能就会显示出错)

如果非要搞特殊字体,就需要让用户的浏览器,从程序员提供的服务器上来下载相关的字体文件.

2.字体大小

p {    

font-size: 20px;

}

不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)

可以给 body 标签使用 font-size

要注意单位 px 不要忘记.

标题标签需要单独指定大小

3.字体粗细

p {

font-weight: bold;    

font-weight: 700;

}

4.文字样式

设置字体倾斜.

一般很少把正常的字给斜了,而是经常要把斜的字给正过来.

font - style: normal 取消倾斜

常见写法:

文本属性 

1.文本颜色

color属性来进行设置.

R、G、B:红绿蓝

色光的三原色

给  r  g  b  各自分配一个字节.8 bit,0 - 255

其中的0就表示这个分量没有值.255就表示这个分量拉满.

结合rgb就可以组合出各种各样的颜色出来了.

实际在开发的时候,很少会使用这种"大红大绿"这种纯色,因为不好看....

还有一个rgba也能设置颜色

a就是alpha:透明度

也是使用1个字节8比特位来表示.

在使用rgba写法的时候,a往往写作一个 0-1 之间的小数

color属性除了设置rgb/rgba,还有其他的写法:

1.直接写成一些单词.red,green,blue,purple,orange......表示一些常见的颜色.

2.还可以写成十六进制的数字

两个十六进制数字就是一个字节.

rgb三个字节,就是用六个十六进制数字来表示.

用#开头

在使用十六进制表示的时候,如果是形如#000000 可以缩写成#000 

形如#ffffff缩写成#fff

#ff00ff缩写成#f0f

但是#ff0012 不能缩写成#f012  #0ff000 不能缩写成0f.....

只有两两相同的时候才能进行缩写,认识有就好.

2.文本对齐

左对齐,右对齐,居中对齐

text-align: [值];

此处的对齐,指的是 "水平方向" 的对齐,不是垂直方向

 3.文本装饰

text-decoration: [值];

常用取值:

underline 下划线. [常用]

none 啥都没有. 可以给 a 标签去掉下划线.

overline 上划线. [不常用]

line-through 删除线 [不常用] 

 

下划线,上划线,删除线...

更常用的方法,不是说给元素加上这些线,而是给已经带了线的元素去掉.

典型的就是a标签.(a标签默认的延时就是带下划线的) 

4.文本缩进

p段落中一般咱们希望第一行能够缩进两个字.控制段落的 首行 缩进 (其他行不影响)

根据字体大小来设置缩进的像素数量

text-indent: [值];

em也是一个单位,是以当前字体大小为基准的.1em就表示尺寸和字体大小一样.(字是20px,1em就是20px)

2em就表示尺寸是字体大小的2倍

(相对数值)(字是20px,2em就是40px)

0.8em,就是字体大小的0.8倍.字是20px,0.8em 16px

5.行高

行高指的是一行文字的高度 => 包含了文字本身的高度 + 行间距

可以通过行高来干涉影响"行间距"

HTML 中展示文字涉及到这几个基准线:

HTML 中展示文字涉及到这几个基准线:

顶线

中线

基线 (相当于英语四线格的倒数第二条线)

底线

 line-height: [值];

注意1: 行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px

 text-align属性是控制文字水平方向对齐.

line-height 控制文字垂直方向对齐

设置行高等于父元素的高度,就可以设置文字垂直居中对齐的效果.(特指单行文本)(这是一种比较传统的垂直居中的实现)

背景属性

1.背景颜色

background-color: [指定颜色] 

background-color属性的值和color的值写法格式完全相同.

1.可以支持单词.

2.可以支持#十六进制

3.可以支持rgb

4.可以支持rgba

这个属性还有一个特殊的值,transparent 表示背景透明.(就能透过这个元素,看到该元素的父级元素)

2.背景图片

background-image: url(图片路径); 

指定一个图片作为背景图

这个时候是显示不出来的.

为了能够让div能显示出来.

①.给div里面塞点东西

②.直接给div设置一个 height 属性.

 当前看到背景图,是属于"平铺" 状态的.

在CSS中可以使用

background - repeat 来设置平铺方式

background-repeat: [平铺方式]

重要取值:

repeat: 平铺

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺

背景图片和背景颜色,是可以同时存在的.

此时就看图片的大小了.图片能盖住的地方就显示图片,空余的地方,就是显示背景颜色

3.背景位置

使用background - position 来设置背景位置.

background-position: x y;

x,y分别表示水平居中和垂直居中

写一个证明垂直水平都居中

4.背景尺寸 

background-size: length|percentage|cover|contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px

也可以填百分比: 按照父元素的尺寸设置.

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。 

contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

 

圆角矩形

通过 border-radius 使边框带圆角效果.

border-radius: length; 

基本用法:

基于这种 "圆角矩形" 可以实现把一个正方形变成圆形.

很多网页表示"头像"都是一个圆形的,就可以通过 border-radius 值设为 50% 来实现

如果要是当前不是正方形,就是一个比较扁的矩形,通过把 border-radius 的值为矩形高度的一半,此时也可以实现一个类似于 矩形和圆形混合的一种形状.

1

实现一个按钮的效果

 

3.展开写法 

border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

border-radius:2em;

等价于

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px; 

等价于

等价于(按照顺时针排列)

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottom-right-radius:30px;

border-bottom-left-radius:40px;

CSS中一般按照4个角/4个方向来设置属性的时候,一般都是按照 顺时针 来进行设定的.

 Chrome 调试工具 -- 查看 CSS 属性

打开浏览器

有两种方式可以打开 Chrome 调试工具

直接按 F12 键

鼠标右键页面 => 检查元素

HTML的显示模式.

很多种!!!

主要说两种:

block:块级元素

inline:行内元素

这俩主要涉及到一个属性 display,通过display属性值设为block就是块级属性,inline就是行内元素

一般来说独占一行的就是块级元素.

不独占一行的就是行内元素.(不是绝对的) 

块级元素:

h1 - h6

p

div

ul

li

......

行内元素:

span

em

strong

a

.......

img既不是行内元素,也不是块级元素,叫做"行内块元素"

针对任意的元素,都可以通过 display 属性来修改的显示模式.

关于块级元素和行内元素的对比

1.是否独占一行

2.块级元素,高度,宽度,内外边距,行高....都是可以控制的;行内元素高度宽度行高都是无效的,左右外边距有效,上下有效,内边距有效

3.块级元素默认的宽度就是和父元素一样,行内元素默认宽度和本身内容相关.(如果没有内容,宽度就是0了)

4.块级元素内部可以容纳其他块级元素,行内元素内部只能包含行内元素,不能包含块级元素

这个是面试前端,的一个常考的面试题.了解即可

p标签,虽然是块级元素,但是p标签内部只能放文字和行内元素,一般不适用p来放块级元素

不是所有的元素都可以设置尺寸.尝试设置,也不报错,只是没有效果.

如果给行内元素里面添加了块级元素,这种操作虽然浏览器(chroome 能够显示出来),但是整体来说还是不推荐的.(浏览器的强大容错能力)

display就能修改当前元素的显示方式

通过这种方式就能把a标签转成块内元素

实际开发中,经常是需要把行内元素转成块级元素(方便布局) 

很少会把块级元素转成行内.....

当我们把a标签转成块级元素之后,此时确实可以设置宽高了,但是也就不能在一行里面排列了.

如果要是想既能设置宽高,又能一行排列

行内块元素(display: inline block)

盒模型 

html中的每个元素,都是一个矩形.

矩形里面可以包含一些内容,就好像一个"盒子"一样

一个盒子由以下几个部分构成:

1.外边距

2.边框

3.内边距

4.内容

1.边框 border

1.1 border - width: 边框的粗细

1.2 border - style: 边框的样式

1.3border - color: 边框的颜色

复合写法,直接一个属性就能把几个样式都表示出来 .

这三个属性顺序没啥要求.

分成四个方向分别设置边框

border-top/bottom/left/right

 

设置边框不再撑大盒子

2.内边距 padding

默认情况下内容一般是顶着边框来放.

 内边距也会撑大盒子

复合写法:

可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]

padding: 5px; 表示四个方向都是 5px

padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px

padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px

padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

外边距

基础写法;

控制盒子和盒子之间的距离.

可以给四个方向都加上边距

margin-top

margin-bottom

margin-left

margin-right

块级元素水平居中

 

 

去除浏览器默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式. 使用通配符选择器即可完成这件事情. 

 

CSS样式可以叠加,也可以覆盖.

如果多个选择器选中了一个元素,

并且尝试给这个元素设置不同的样式,此时这些样式会叠加.

如果是尝试给这个元素设置相同的样式,此时这个样式就会出现覆盖.

当前说的盒模型,是针对块级元素来展开的.

(行内元素来说,情况差异很大)

 页面布局

让元素摆放到一个合适的位置上.

页面布局的原则:先按照行来布局,再按照列来布局

块级元素本身,就是独占一行

默认就是竖着排列的

重点就是要解决能够横着排列的问题

弹性布局,更好的解决按照水平方向布局的问题的.(弹性布局是属于诞生的比较晚的一种布局方式)

 弹性布局中的主轴和侧轴

默认情况下,水平方向就是主轴,垂直方向就是侧轴.

使用 align-center 实现垂直居中,这是推荐做法.

通过弹性布局中的这两个属性再加上盒模型中的一些相关的边距,基本上就能实现大多数页面布局效果了.