前端相关知识(CSS)(1)(美化页面效果)

1)HTML只是描述了页面的结构和内容，也就是骨

2)CSS描述的是页面的样式，也就是页面具体长成什么样子，也就是皮

3)具体来说就是就是描述了任意一个网页的元素，大小，位置，字体，颜色，背景，边框，引入CSS就可以让页面变得好看

4)每一个CSS的代码包含着两部分:选择器+对应的应用的属性

4.1)上面就是一个最基础的CSS代码，p就是选择器，此处就表示选择页面中的所有P标签；

{}里面是键值对结构，每一个键值对就对应着一个CSS的属性

4.2)键值对之间使用";"来进行分割，习惯上每一个键值对之间会独占一行

4.3)键和值之间要使用冒号来进行分割，习惯上会在冒号后面加上一个空格

4.4)/* */这是CSS中的注释，CSS是不支持//这样的注释

5)CSS代码可以放在HTML文件里面，通常是放在style标签里面，然后style标签可以放在HTML文件里面的任意位置

6)color是设置字体颜色的，font-size是设置字体大小的

一)CSS的引入方式:

1)内部样式CSS，在style标签里面，style标签可以放到head中，也可以放到其他位置，也可以存在多个style标签

2)行内CSS，在元素里面有一个style属性，样式针对当前元素生效，优先级比内部样式更高，不避写选择器了

2.1)当前这种写法是通过html标签中的style样式来进行应用一些样式

2.2)当前这种内联样式，只是属于一种比较特殊的用法，通常会搭配JS来进行使用，但是这种写法只是适合于当前样式特别简单的情况，如果样式复杂，这里就会显示的很乱

2.3)内联样式只是针对于当前元素进行生效，不需要写选择器，也不用选{}，直接写CSS属性即可；
<div style="font-size:30px; color:red">helloworld</div>
//设置div里面的字体设置成红色,字体大小是30px
3)外部CSS，这是把CSS代码单独提取出来，放到一个.CSS文件里面，然后再从HTML代码里面，通过link标签来引入该CSS文件，在HTML中通过link标签引入CSS文件；

这种方式可以让多个HTML页面共用同一份样式，比如说写一个网站，这个网站里面可能会有很多的页面，但是很多页面的样式都是相似的

这种link标签，一般习惯于放在html的head标签里面，这个标签可以存在多份，可以通过多个link标签来引入不同的CSS

同时在开发者工具里面也会提醒我们，这个样式是在哪一个CSS来进行引入的
 <link rel="stylesheet" href="test.css">
后缀名是.css
1)当浏览器首次访问网站的时候，就会下载这些CSS到本地，后面进行第二次访问的时候，这些CSS就不用进行二次下载了，这些CSS就会存放在浏览器的缓存里面，他所存在的意义就是为了提高访问速度

2)真实的网站，CSS越长，从服务器下载的内容就越多，就越消耗带宽，所以我们要减少空格和缩进；带宽是很贵的

3)如果说针对CSS样式多了一些换行，虽然对于程序员友好了，但是整体的CSS文件会变大，由于CSS文件都是通过网络传输传输给浏览器的，然后由浏览器来进行解析的，如果说CSS文件变大了，就更吃网络带宽，就更影响效率，JS不光会把换行缩进去掉，还会把长的变量名给去除；

4)因此当我们通过开发者工具，去看其他的CSS代码基本上都是紧凑风格，通过前端开发工具进行打包，但是我们在开发阶段的代码基本上都是使用的是宽松的换行风格；

5)HTML和CSS都是不区分大小写的，CSS中通常使用颈柱命名法，通常加上-来区分不同的单词

二)CSS基础选择器

一)标签选择器:

选中一类标签，例如上图中的选中P标签，就会让当前所有的P标签都会被选中，会根据标签名，把当前所有的标签都进行选中；

二)类选择器：

2.0)在CSS中创建类来指定哪些元素要遵守该样式，开头中的.表示类；.后面中的部分是类的名字；一个类可以被多个标签来使用，一个标签也可以使用多个类；

2.1)通过类选择器，就可以随心所欲地进行选择任意想要的元素，但是从理论上来说只是需要一种选择器就足够了

2.2)首先我们需要在CSS代码中创建一个类名，在对应的html元素中，通过class属性来引入这个类名，此时具有该类名的元素，就都会应用上相关的CSS属性
<div class="green font">咬人猫</div>类和类之间用空格来分开
<div>hhhh<div>
类选择器以.进行开头,后面是类的名字
<style>
.green{
}
.font{
}
</style>
现在我们需要来做一个场景:class类相当于是分类

将下面的第一个P标签和第二个P标签字体放大并进行变色，剩下的两个p标签不变:

三)id选择器:

每一个html元素都有一个id属性，并且要求这个属性是页面中唯一的值，当id选择器在创建的时候是需要#来进行开头的，id选择器相当于是按照身份证号来查找

我们需要先给被选中的元素加上一个id属性，因为id在一个页面中是不可以重复的，因此id选择器只能选中

四)通配符选择器:选中页面所有元素
*{  将页面中的所有字体大小设成30像素，背景颜色设成蓝色font-size:30px;background-color:blue;}
1)最大的用途就是取消浏览器的默认样式

2)一个专业的前端开发工程师，在开发过程中，有相当一部分是要处理浏览器当中的兼容性(写一份代码，在不同的浏览器上面有不同的效果)

三)复合选择器:

1)后代选择器:使用空格来进行分割

先指定一个父亲元素，然后再指定一个子元素，后代不一定非的是子元素，还可以是孙子元素，况且后代选择器不一定非得是标签选择器的组合，还可以是任意的基础选择器的组合用空格来进行分割

选择器1 选择器2{}；

1.1)选择器之间必须要有空格

1.2)选择器1和选择器2都可以是标签选择器，类选择器或者是ID选择器

2)后代选择器:通过多个选择器的组合，能够选择某一个元素里面的子元素

通过多个选择器的组合，可以进行选择某一个元素里面的子元素
<head><meta charset="UTF-8"><title>Title</title><style>ul li{
选中页面中ul标签下面的所有li标签color:red;font-size:30px;}ol .user{
选中页面中的ul标签中是有class等于name的元素color: blue;font-size:40px;}div #name{
选中页面中的div标签中的id是name的元素color: green;font-size: 50px;}</style>
</head>
<body><ul><li>咬人猫</li><li>兔总裁</li><li>阿叶君</li></ul><ol><li class="user">咬人猫</li><li class="user">兔总裁</li><li class="user">阿叶君</li></ol><div><p id="name">咬人猫</p><p id="name">兔总裁</p><p id="name">阿叶君</p></div>
</body>
<!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>Document</title><style>table tr td{text-align: center;color:red;}</style>
</head>
<body><table border="5px" height="300px" width="300px" cellspacing="0px"><tr><th>姓名</th><th>电话号码</th><th>密码</th></tr><tr><td>李佳伟</td><td>12503487</td><td>12503487</td></tr><tr><td>周韵杠</td><td>1257</td><td>12587</td></tr></table>
</body>
</html>
这里的意思是先找到类名是list的元素
然后再找到里面的li标签
再找到里面的a标签
但是要注意li不一定是是.list的子元素
也可以是孙子元素;a不一定是list的子元素
也可以是孙子元素,所以最终可以把li去掉.list li a{color:green;font-size:40px;}
3)子选择器:

选择器1>选择器2
先找选择器1，再找选择器2，选择器2只能是选择器1的子元素

也就是说选择器2不能是选择器1的孙子元素

举个例子将ul标签对应的li子标签下面的a标签变成绿色并且将字体放大
<ul class="list"><li><a href="../textKK/like.png" target="_blank">点击我跳转到世外桃源</a></li></ul>
.list>a{color:green;font-size:50px;}
1)上面这么写元素是不会被选中的，因为class是list对应的标签的子标签并不是a标签，而是li标签；
2)先去找class属性是.list对应的标签，再去找.list对应的子标签li，再去找li对应的子标签a
.list>li>a{color:green;font-size:50px;}

在下图中:将所有的咬人猫变成红色:

<div class="cat"><ul><li><a href="#">咬人猫</a></li><li><a href="#">咬人猫</a></li><Li><a href="#">咬人猫</a></Li></ul></div>

.cat a{color:red;}
.cat ul li a{color:red;}.cat ul a{color:red;}.cat>ul>li>a{color:red;}
li>a{
color:red;
}
li a{
color:red;
}

4)并集选择器:并列的写多个选择器，期间使用逗号来进行分割

选择器1，选择器2{}；

这里的并集选择器可以写简单的选择器，也是可以写复合的选择器

下面是将所有表中字段的值变成红色
  <style>tr>th,tr>td{color: green;font-size: 30px;}</style>
</head>
<body><table border="5px" height="300px" width="300px" cellspacing="0px"><tr><th>姓名</th><th>电话号码</th><th>密码</th></tr><tr><td>李佳伟</td><td>12503487</td><td>12503487</td></tr><tr><td>周韵杠</td><td>1257</td><td>12587</td></tr>

5)伪类选择器:

5.1)链接伪类选择器:和a标签来进行搭配使用:link/visited/hover/active{}
  a{font-size:30px;}a:link{color:black;}a:visited{color:yellow;}a:hover{color:green;}a:active{ color:red;}
<a href="http://www.baidu.com" target="_blank">我是一个超链接</a>
1)从来没有被访问过：link；

2)已经被访问过：visited(1，2条是专门针对a标签来说的）

3)鼠标悬停:hover(没有按鼠标)，鼠标悬停的时候，应用这个样式

4)活动链接:鼠标按下的时候，应用于这个样式:active，(3，4针对任何的标签都生效)；

上面主要是进行描述鼠标被按下的时候所进行执行的样式

5.2)伪类选择器中的一种，获取焦点的时候被选中，它是专门针对输入框来说的，像哪个输入框里面写元素，里面的字体就可以显示成指定的颜色,当我们的鼠标移动到别的输入框之后，字体就变成了别的颜色
input:focus{color:red;}
<div><input type="text"><input type="text"><input type="text">
</div>

四)常见的CSS属性:

CSS 语法 (w3school.com.cn)

一)字体的设置以及文本属性:

一)设置字体类型:

font-family:" "，宋体，隶书，微软雅黑，里面可以设置成汉字

对于font属性是可以继承的，子元素会继承父类元素的相关属性；
  <style>body{font-family:"黑体";}</style>
<body>
<div>中国我爱你
</div>
</body>
1)在body中设置的字体，div中也是可以生效的，有关于font相关的CSS属性是可以进行继承的，子元素会继承父类元素的相关属性

2)如果需要在某一个元素中使用不同的字体，我们就可以针对这个元素来进行单独设置字体，此时新的字体样式会自动的覆盖掉继承于父元素的字体样式

二)设置标签中的字体大小:font-size:" "，里面的单位是像素；

三)字体的粗细:font-weight:取值有两种风格，一种是数字，一种是取值

normal:定义标准的字符

bold:定义粗体字符

bolder:定义更粗的字符

lighter:定义更细的字符，从100到900表示有粗到细的字符，数字越大越粗

400等同于normal，700等同于bold

四)font-style是倾斜样式，很少把正常的字体倾斜，而是把倾斜的字变成正规的，属性值直接变成nomal即可；

em标签就是自动带斜体的
em{font-family:"宋体";font-size:30px;font-style:normal;}

五)文本颜色:color属性

5.1)表示形式:color:rgb(A,B,C)

5.1.1)A,B,C都是表示0-255范围内的数值，表示颜色的范围，A为红，B是green,C是蓝色，

其中0就表示这个分量没有值，255就是直接把这个分量拉满；

5.1.2)还可以加上这样一个属性rgba(A,B,C,D)，D表示透明度，它的范围是0-1的小数，通过透明度，可以实现一些半透明的效果，1表示不透明，在网页中啥也看不到，0表示半透明；

三个分量都调成255，就会得到黑色

5.2)我们也可以直接显示颜色，red，blue；

5.3)这里我们要区分一下背景颜色background-color和color

color是把对应的文字设置想要的颜色

5.4)但是backgrond-color是设置文字本后面的颜色，并可以通过height和width来设置背景颜色覆盖的范围，同时rgba也可以搭配背景颜色来使用，可以实现半透明效果

也可以写成16进制数字来进行表示，我们用#进行开头，#00ff00

00表示没有，ff表示拉满

5.5)但是这对于16进制的写法，可能会有缩写

必须是形如#XXYYZZ的形式可以缩写成#XYZ

00ff00--->0f0
p{background-color:red;height:300px;width:400px;}

五)文本对齐(左对齐，右对齐，居中对齐)

1)主要是控制div或者是一些其他标签的文字在浏览器的整个页面上或者是背景区域快是靠左对齐还是靠右对齐

2)text-algin不光可以控制文字对齐，也是可以控制文字或者图片等在浏览器界面上元素居中或者靠左对齐

3)这里的文本对齐是通过text-align来实现的，但是他只可以控制水平方向的对齐，只可以控制一行；如果想要控制在水平方向1/3位置处对齐，就要考虑其他的CSS标签；

4)下面我们写的样式，三个div标签，是独占三行的，最外边好套着一个div标签

5)text-align只能控制元素所在的那一行是水平居中，还是垂直居中
   .father{background-color:green;width:500px;height:500px;}.one{text-align:left;}.two{text-align:right;}.three{text-align: center;}
<div class="father"><div class="one">左对齐</div><div class="two">右对齐</div><div class="three">居中对齐</div>
</div>
再次举个例子:
<!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>Document</title><style>.one{background-color:red;height:100px;width:500px;text-align:left;控制元素在背景块所在行的最左面}.two{background-color:orange;height:100px;width:500px;text-align:center;控制元素在背景块里面所在行的的中间}.three{background-color:blue;height:100px;width:500px;text-align:right;控制元素在背景块里面放在当前行所在的最右边}</style>
</head>
<body>
<div class="one">你好Java</div>
<div class="two">你好Python</div>
<div class="three">你好C++</div>
</body>
</html>

六)文本样式:text-decoration:这里是不需要加双引号的；

underline:下划线 overline:上划线 none:啥都没有 line-through:删除线；
.one{text-decoration:none;;}.two{text-decoration:underline;}.three{text-decoration:overline;}.four{text-decoration:line-through;}
<div class="one">这是正常情况</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</d
下划线上划线最大的用法，并不是说给这些元素加上这些线，而是把已经带了线的元素去除掉，例如：
a{text-decoration:none;color:red;}
<a href="#">我是一个超链接</a>
七)文本缩进：

应用场景:我们一般希望在第一行中可以缩进两个字，我们就用text-indent来表示；
 p{font-size:39px;text-indent:46px;//2em缩进两个字,1em是20px}
1)这个属性只是控制段落的首行缩进，其他行是不会影响的，单位可以使用px或者是em

2)使用em是更好的，1em就表示当前元素的文字大小，是相当于当前元素的文字大小

假设当前的p标签里面的文字大小是16px，那么1em=16px，2em=32px，0.5em=8px

3)text-indent缩进可以是负数，表示反向缩进，最终就会导致文字冒出去了

八)行高:

1)行高=字体大小+行间距

2)假设现在有三行文字，第一行最顶端到第二行最顶端的距离就是行高；相当于是文字本身的高度加上行间距；

3)上一个元素的底部到下一个元素的最下端

行高，其实本质上来说，就是顶线到顶线的距离，也是底线到底线的距离，也是中线到中线的距离，也是基线到基线的距离

前端相关知识(CSS)(1)(美化页面效果)相关推荐

视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
前端(五)——CSS之美化页面
文章目录 1. 美化页面原因 2. span标签 3. 字体样式 4. 文本样式 5. 超链接伪类 6. 列表 7. 背景 8. 渐变 9. 盒子模型 1. 美化页面原因有效的传递页面信息美化网页 ...
前端相关知识(html)
1)我们首先在自己的电脑桌面上创建一个html文件,里面只是写一个helloworld直接拖拽到自己的本地浏览器也是可以运行的,因为浏览器的容错能力很强: 2)或许说我们直接用记事本创建一个文件,后缀 ...
前端开发认识css 体验变色的效果 0228
css的功能没有css的html 有了css后的网页效果只有html的网页只有内容主体当html加上了css后对主体内容有了一个修饰更好看了关于css 小试一下让文字变红更改按钮样式 ...
css一些美化页面的方法
伪类: 很常用的hover 鼠标移动到父元素时子元素变色写父级元素:hover 子元素{}这样直接对子元素进行操作. 还有就是对他的兄弟元素发生改变:用+加兄弟元素,如果让所有的兄弟元素发生变化那就 ...
前端入门知识css之字体样式
文章目录 1 CSS字体 1.1 字体样式 1.2 文本字体 1.3 字体粗细 1.4 字体⼤⼩ 1.5 字体行高 1.6 综合设置 1 CSS字体 1.1 字体样式 font-style 设置字体样 ...
前端开发问题——css设置背景样式效果无法显现
思考维度 1.css样式是否配置有误,如:检查背景url是否写错,css样式是否被调用,是否出现同名css导致样式被覆盖 2.背景无法撑开元素的宽高,在为元素设置背景时一定要先设置宽度 3.设置背景的 ...
达内html5是什么,Web前端工程师应该知道的HTML5相关知识有哪些
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的HTML5相关知识有哪些?随着互联网技术的快速发展,人们对互联网的使用越来越大,对于界面和用户体验的要求越来越高.因此Web前端越来越火,前端 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...

前端相关知识(CSS)(1)(美化页面效果)

一)CSS的引入方式:

二)CSS基础选择器

一)标签选择器:

二)类选择器：

三)id选择器:

四)通配符选择器:选中页面所有元素

三)复合选择器:

1)后代选择器:使用空格来进行分割

2)后代选择器:通过多个选择器的组合，能够选择某一个元素里面的子元素

3)子选择器:

4)并集选择器:并列的写多个选择器，期间使用逗号来进行分割

5)伪类选择器:

四)常见的CSS属性:

一)字体的设置以及文本属性:

五)文本颜色:color属性

五)文本对齐(左对齐，右对齐，居中对齐)

六)文本样式:text-decoration:这里是不需要加双引号的；

七)文本缩进：

八)行高:

前端相关知识(CSS)(1)(美化页面效果)相关推荐

最新文章

热门文章