与html一样,东西很多,比较零碎,但是比较散,不需要刻意去记
这里边,对于后端学习,主要掌握类选择器即可。
通过个人博客那里进行练习、文字垂直居中
脚本语言,Script lanuages /Scripting programming languages/scripting languages,又被称为扩建的语言,或者动态语言,是一种编程语言,用来控制软件应用程序,脚本通常以文本如ASCII保存,只在被调用时进行解释或编译。
是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。
几乎所有计算机系统的各个层次都有一种脚本语言。包括操作系统层,如计算机游戏,网络应用程序,文字处理文档,网络软件等。在许多方面,高级编程语言和脚本语言之间互相交叉,二者之间没有明确的界限。
脚本语言是一种解释性的语言。用脚本语言开发的程序在执行时,由其所对应的解释器(或称虚拟机)解释执行。
快速开发、容易部署、同已有技术的集成、易学易用、动态代码
C Shell、JavaScript、PHP、CSS、Python、VBScript、Ruby等
动态语言,也叫做弱类型语言,是运行时次啊确定数据类型的语言,变量在使用之前不需要申明类型。例如:JS等。
例如:var a=10; var b="acd";
静态语言,也叫做强类型语言,是编译时变量的数据类型就可以确定的语言,大部分静态语言要求在使用变量之前必须声明数据类型,例如java 、C/C++等。
如果我们已经理解开发和运行的区别,这里理解也会更容易一些。
CSS,即Casscading Style Sheets,中文意思是层叠样式表,是一种表现HTMl或者XML等文件样式计算机语言。
它可以静态的修饰网页,也可以配合各种脚本语言动态地对网页元素进行格式化。
简而言之,它就像我们在html中说的一样,是皮,是化妆术,起到界面美化的功能。
丰富的样式定义
相较于html,它允许设置文本、背景属性等。
易于使用和修改
多页面应用
CSS样式表可以单独存放在一个CSS文件中。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠
层叠就是对一个元素多次设置同一个样式,最终呈现的效果是最后一次设置的属性值。而不是就像滤镜一样,多层叠加!!
页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。
选择器+若干属性声明:
选择器 + {一条/多条声明}
css的注释是/**/
,这里边的注释是不能嵌套的。
CSS与HTML类似,都只是简单的声明有什么,但是没有具体的逻辑。
那么css代码写到哪里呢?又是怎么运行的呢?
简而言之,CSS代码的执行最终是需要内嵌到html里边的。所以问题就转移到了我们怎么内嵌这些代码。
主要有三种方式,分为内部样式表、行内样式表、外部样式。
实际开发中,一般使用外部样式来写CSS,让html和CSS相互分离。而初学CSS,我们主要使用内部样式表,比较简单方便。
使用stylr标签,直接把CSS写到文件中。此时的style标签可以放到任意位置,一般建议放到head标签中。
优点:能做到样式与页面结构分离
缺点:当css内容较多时,分离不彻底。
例如:
<html> <head>head> <body> <style> p{ color: red; } style> <p> 这是一个段落 p> body> html>
通过 style 属性, 来指定某个标签的样式
说明:只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式. 内联样式>内部样式>外部样式
例如:
<html> <head>head> <body> <p style="color:green;font-size: 50px;"> 这是一个段落 p> body> html>
把css单独创建一个 css 文件,使用 link 标签引入 css 。
这也是实际开发中使用最多的一种方式。
而当前只是为了熟悉语法规则,所以使用的内部样式/内联样式
<link rel="stylesheet" href="[CSS文件路径]">
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS练习title> <link rel="stylesheet" href="style.css"> head> <body> <p> 这是一个段落 p> <p> 这是另一个段落 p> body> html>
p{ color: blue; font-size: 100px; }
推荐使用展开风格
紧凑风格 和展开的,更推荐使用展开的风格。
p{ color: red; font-size: 30px;}
p {
color: red;
font-size: 30px;
}
大小写不区分,但是开发统一使用小写字母
空格规范:冒号后加空格、选择器和{之间也加空格
css基本的代码结构组成——选择器+属性我们已经知道,下边就开始正式学习。
选择器的分类:CSS2标准下,分为基础选择器和复合选择器两大类。
在{前边写标签名字,意味着选中当前页面中所有的指定标签!!
但是有很多时候,我们想要p标签中部分段落设置成这个属性,这显然不太合适,这个时候类选择器的使用就非常有必要了。
可以手动创建CSS类,手定指定哪些元素应用这个类(与java里的类不同,只是一个属性的集合)
定义类需要使用.开头;
引用这个类时,需要通过class这个属性,不需要再加点。
例如:
"one">这是第一个div"two">这是第二个div"three">这是第三个div
注意:同一个div可以同时引用多个类,多个类之间使用空格分割,可以层叠(如果是同一个类型的,(都是颜色的话)最终效果是最后一个样式)。
改动的代码:
这是第一个div
这里我们还可以通过浏览器的控制台进行查看
HTML页面中的每个元素都可以设置一个唯一的id,作为元素的身份标识。
给元素安排id之后,就可以通过id选中对应的元素了。
与类选择器不同,id选择器只针对唯一的元素生效,而类选择器是可以让多个元素应用到同一个类的。
使用方式:定义时使用#表示id选择器;使用时不用带#
例如:
<html> <body> <style> #onediv{ color: red; } #twodiv{ color: greenyellow; } #threediv{ color: blueviolet; } style> <div id="onediv">这是第一个divdiv> <div id="twodiv">这是第二个divdiv> <div id="threediv">这是第三个divdiv> <div id="onediv">这是第四个div> body> html>
CSS除了支持简单的基础选择器,还支持更复杂一些的“复合选择器”,其实也就是将前边的基础选择器进行组合。
把前边的多个简单的基础选择器,组合一下(可以是标签、类、Id的任意组合)
标签之间采用空格进行分割。
例:标签+标签
<html> <head>head> <body> body> <style> ul li{ color:antiquewhite; } style> <ol> <li>aaali> <li>bbbli> <li>cccli> ol> <ul> <li>aaali> <li>bbbli> <li>cccli> ul> body> html>
这里的后代选择器就是:先写父标签、再写子标签
注意:这里li只要是ul的后代即可,不一定是子元素,孙子也可以,重孙也可以……
例:类选择器+标签
<html> <head>head> <body> body> <style> /*ul li{ color:antiquewhite; }*/ .onediv li{ color: red; } style> <ol> <li>aaali> <li>bbbli> <li>cccli> ol> <ul class="onediv"> <li>aaali> <li>bbbli> <li>cccli> ul> body> html>
例:id选择器+标签
<html> <head>head> <body> body> <style> /*ul li{ color:antiquewhite; }*/ #onediv li{ color: red; } style> <ol> <li>aaali> <li>bbbli> <li>cccli> ol> <ul id="onediv"> <li>aaali> <li>bbbli> <li>cccli> ul> body> html>
也是把多个简单的基础选择器组合(标签类id选择器任意组合)
使用>进行分割
但是与后代选择器有所区别的是:只找匹配的子元素,不找孙子元素
<body> style> <ol> <li>li> <li>bbbli> <li>cccli> ol> <ul class="onediv"> <li>aaali> <li>bbbli> <li>cccli> <ol> <li>111li> <li>222li> <li>333li> ol> ul> body>
使用,进行分割,也是将其他简单选择器进行组合。
效果:多组选择器,应用了同样的样式
例如:
<style> .two{ color:green; } .three{ font-size:50px; } .two,.three{ font-size:40px; } style> <div class="two three">这是一个段落div> <div class="two">这是另一个段落div> <div class="three">这是另另一个段落div>
前边的选择器是选中某个元素,伪类选择器是选中某个元素的某个状态。
伪类选择器有很多,这里我们只介绍两种:鼠标悬停状态、鼠标点击状态
例如:
<style> .one:hover{ color:blue; font-size:50px; } .one:active{ color: cadetblue; font-size: 30px; } style> <div class="one">这是一个段落div>
CSS常见属性,就是具体样式的设置了。样式涵盖很多方面,包括不限于大小、位置、颜色、形状、边框、特殊滤镜、过度效果、动画等。
我们只需要记住些常用的,其他的用到之后再去查即可。
eg:
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
注意:
eg:
font-size: 20px;
浏览器的每个文字都可以视为一个方框。
若中文:一般是个正方形
若英文阿拉伯数字,方框比较窄
注意:当我们去测量时(使用截图工具),只有我们的浏览器缩放设置和显示器的缩放设置都是100%时,才能得到正确结果,或者说你知道你这两个设置的比率然后进行计算也可以
注意:
实际设置时,有两种典型的设置风格
1.使用单词【normal\bold\lighter\bolder】 2.数字【范围是1-100】
eg:
font-weight: bold;
font-weight: 700;
eg:
font-style: italic;/*倾斜*/
font-style: normal;/*正常*/
通过这些样式,我们其实就可以将一个普通段落设置h1的格式了
例:将普通段落不通过h1标签设置成h1的格式
背景知识:计算机如何表示颜色
颜色是不同波长的光,日常看到的很多光,都是混合成的,红绿蓝三原色等比例混合。
所以计算机表示颜色,可以通过一种典型方式RGB的表示方式。
前端中,给RGB各分配一个字节,每个字节的范围都是0-255/00-FF
实际表示:color:rgb(xx,xx,xx);
通过这三个分量不同比例的搭配,就可以调和出不同的颜色。
实际上使用哪个颜色,有美工组,不用你操心。若没有可以自己看到哪个颜色好看,去查它的参数,使用qq截图下边会显示。例如:
这里边的牛皮纸的颜色:就可以通过这里的rgb参数设置直接拿到
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
其中如果十六进制下,每个分量的两个十六进制都相同,就可以把16进制缩写成3位十六进制。例如AABBCC==>ABC
不仅是color会遵守这套规则,其他跟颜色相关的属性,也是这样表示颜色的——单词、十六进制、rgb
text-align: [值];
靠左靠右居中,分别对应三个单词——left、right、center
text-decoration: [值];
text-indent: [值];
单位可以使用 px 或者 em,使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.【element】【可以说他俩都是相对单位】
缩进可以是负的, 表示往左缩进,不过这样会导致文字就冒出去了
背景知识:通过行高间接设置行间距
行高=文字高度+行间距
line-height: [值];
这里值使用的单位是px
这里我们通过浏览器控制台那里查看效果
这里我们设置可以通过鼠标滚轮或者上下方向键直接调整这里的值,看一个动态的效果
background-color: [指定颜色]
background-image: url(...);
绝对、相对、网络路径均可。url 上可以加引号, 也可以不加
background-repeat: [平铺方式]
取值有repeat: 平铺、no-repeat: 不平铺、repeat-x: 水平平铺、repeat-y: 垂直平铺
默认是 repeat
background-position: x y;
参数有三种风格:
background-size: length|percentage;
这里可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px,也可以填百分比: 按照父元素的尺寸设置.
contain:是让图片尽可能变大尽量等比例放大
cover:是让图片铺满
因此,我们可以使用background系列属性代替,img标签。
html默认都是尖角矩形,这里我们介绍css中圆角矩形的引入和使用。
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
例如:
哈哈
一直调整参数即可
display:block
display:line
任何一个html标签的显示模式(块级/行内)都是可以设置的
关于块级元素和行内元素的区别:
- 跨级元素会独占一行,行内元素不独占一行
- 块级元素高度宽度内外边距都是可以设置的,行内元素幺蛾子比较多
- 块级元素默认宽度是和父元素一样宽,行内元素默认宽度和里边一样宽
没必要记,这是前端的面试题,这里就记住一句话:块级元素比较正常、行内元素幺蛾子比较多。一般需要的话,需要把行内元素转成块级元素。
盒子模型描述了html元素基本的布局规则。
这个盒子由这几个部分构成
其中边框border属性可以直接设置四个方向,也可以单独设置某个属性分别是border-left、border-right、border-top、border-bottom
设置边框需要设置三个方面:
设置完尺寸会改变的问题:
很多时候我们不希望撑大盒子,可能会影响该元素与其他元素的相对位置
解决办法:使用专门的属性防止盒子被撑大
box-sizing: border-box;
<style> div { width: 200px; height: 100px; border: 2px solid green; background-color: #fab; line-height: 90px; text-align: center; border-radius: 10px; /*box-sizing:border-box;*/ border:10px green solid;/*顺序最好不要变*/ } style> <div>哈哈div>
使用方法有以下两大种,其中直接写padding的分支下边又分为3种
只在原来的基础上加上一个padding-left:10px
只在原来的基础上加上一个padding:10px
只在原来的基础上加上一个padding:10px 20px
只在原来的基础上加上一个padding:10px 20px 30px 40px
设置的是元素跟元素之间的距离
margin的写法跟padding差不多,也是可以分4个方向设置。不再演示
注意:这里有个特殊的用法,把margin-left和margin-right设置auto,实现元素居中
注意和前边的元素里边的文字居中设法text-align设置居中进行区分。
这里设置水平居中:margin-left:center ;margin-right-center
那设置垂直居中是不是可以这样设置呢?margin-top:center;margin-bottom:center;很遗憾不可以哦,至于怎么介绍后边再说。
小结:
用来实现页面布局的。【即控制某个元素放进指定位置】
发展历史:
用法:
这里边常用的属性是justify-content、align-items
选择器:
简单选择器:
基础选择器 | 作用 | 特点 |
---|---|---|
标签选择器 | 能选中所有相同的标签 | 不能差异化选择 |
类选择器 | 能选出一个或多个标签 | 根据需求选择最灵活最实用 |
id选择器 | 能选出唯一的标签 | 同一个id在一个HTML中只能出现一次 |
后代选择器:
选择器 | 作用 | 注意事项 |
---|---|---|
后代选择器 | 选择后代元素 | 可以是孙子元素 |
子选择器 | 选择子代元素 | 只能是亲儿子,隔辈儿的孙子也不行 |
并集选择器 | 选择相同样式的元素 | 更好的做到代码复用 |
伪类选择器 | 选择被选中的元素 | 重点掌握a:hover的用法 |
动态语言与静态语言相关阅读
CSS科普