前端技术——2—

CSS是Cascading Style Sheets的简称，即层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

一、CSS的四种引入方式

1、行内式，在标签中使用style属性

<h1 style="color: green;background-color: rosybrown;">hello girl</h1>

2、嵌入式，通过style标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;background-color: aquamarine;}</style>
</head>
<body><h1 style="color: green;background-color: rosybrown;">hello girl</h1><div>hello div</div>
</body>
</html>

3、链接式，引入CSS文件，通过link标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    <meta http-equiv="Refresh" content="200">--><title>This is a Title</title><link  rel="icon"  href="https://g.csdnimg.cn/static/logo/favicon32.ico"><link rel="stylesheet" type="text/css" href="cssmy.css">
</head>
<body>
<div>hello div</div>hello txt
</body>
</html>

4、导入式，使用style标签将一个独立的css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，sytle标签写在head中。

    <style>@import "cssmy.css";</style>

3和4都是引入css文件，但是推荐3链接式，@import是CSS语法，link是HTML语法。代入式@import是所有HTML文档，即整个网页加载完毕后，在使用import的CSS文件进行渲染。

二、CSS选择器

选择器指明了{}中样式的作用对象。

*：通用选择器，作用于所有的内容，如*{color：red}，则页面上所有字体的颜色都变为红色。
标签选择器：对具体的标签渲染，如p{color：red}，则页面上所有的p标签的内容的颜色都变为红色，其他不变。
ID选择器（#ID）：按照标签的ID属性值选择，一般是唯一的，如<h1 id="id12">hhh</h1>，则#id12{color：red；}只作用属性id=“id12”的标签
类选择器（.class）：按照标签的class属性值选择，多个标签的class可以相同，使用最频繁的一种选择器。如<div class="divclass">div1</div> <div class="divclass">div2</div>,则.divclass{color：red}会作用于div1和div2上。

组合选择器：

后代选择器（使用空格）：使用空格分隔，如div p{color：red}，即选择div标签下的p标签。只要是后代，不管是儿子辈，还是孙子辈。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div p{color: darkred;background-color: yellow;}</style>
</head>
<body>
<div id="id1">hello div</div>
<div><p>son</p><span>ooooo<p>grandson</p></span>
</div>
<p>1212121212</p>
</body>
</html>

son和grandson都会被选中并改变样式。
子代选择器（使用>号）：只在子代中选择，不会在往下一代中去找。只f1，f1-1改变，f2-f1不会变，f2-f1不是子代。

<head><meta charset="UTF-8"><style>#outer>.f1{color: darkred;background-color: yellow;}</style>
</head>
<body>
<div id="id1">hello div</div>
<div id="outer">Outer<div class="f1">f1<div class="f1-1">f1-1</div></div><div class="f2">f2<div class="f1">f2-f1</div></div></div>
<p>1212121212</p>
</body>

并行选择器（使用逗号,）：#ID1,#ID2,#ID3{}
毗邻选择器（使用加号+）：#id1+p，只选择紧挨着#id标签下面的p标签。

属性选择器：

一般的，块级标签内可以嵌套内联标签或某些块级标签，但是内联标签不能嵌套块级标签，只能嵌套内联标签；块级标签不能放在p标签中；有几个特殊的块级标签只能包含内联标签，不能包含块级标签，如h1——h6，p，dt；li内可以包含div；块级标签与块级标签并列、内联标签与内联标签并列。

使用中括号[]：下面的选择器选择所有具有class属性的标签，div1，div2，div3都选择了

<head><meta charset="UTF-8"><style>[class]{color: red;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div id="id1">id1</div></body>

如果要选class=“div2”的标签，可以使用[class="div2"]，就是即使用属性名，又使用属性值。

标签就具有规范的属性，也可以自己加自定义的属性，如<div>可以有id，class属性，也可以自定义一个属性，如<div id="id1" class="div1" myattr="as1">，myattr就是我们自己定义的属性，在属性选择器中就可以使用。

还可以在[]前加标签，如p[class="myp"]，即选择p标签且有属性class并且其值为myp的标签。

关于标签的class属性，其值可以是一个，如class=“div1”，也可以是多个值，如class=“div1 div2”

假设attribute=value

"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:　
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">
[attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

伪类（Pseudo-classes）：CSS伪类是用来给选择器添加一些特殊效果。

anchor伪类：专用于控制链接的显示效果

befor和after伪类：在对应的标签前后后添加内容等

<head><meta charset="UTF-8"><style>a:link{color: red;}a:hover{color: yellow;}a:visited{color: aqua;}a:active{color: blueviolet;}p:after{content: "asasasasas";}p:before{content: "dsafdsa";color: blueviolet;}</style>
</head>
<body>
<a href="https://www.baidu.com">baidu</a>
<p>hello ppp</p>
</body>

三、CSS的常用属性

背景属性：

<head><meta charset="UTF-8"><style>#div1{height: 600px;background-color: rosybrown;background-image: url("kk.jpg");background-repeat: no-repeat; /*no-repeat是不重复，repeat，重复，全屏，repeat-x，在x轴，即行方向上重复，repeat-y，在y轴，即列方向重复*/background-size: auto;/*background: url("kk.jpg") no-repeat 100px 200px rosybrown;*/}</style>
</head>
<body>
<div id="div1"></div>
</body>

增加如下代码，空白就没有了。

文本属性：
文本背景颜色设置：

line-height: 50%; /*文本行高，基于字体大小的百分比*/

文本行高是文本高度的50%。

letter-spacing：10px
word-spacing：30px

p{background-color: blueviolet; /*背景原色*/text-align: center;  /*横向排列，文本左右居中*/line-height:  100px;  /*文本行高，就是文字高度加上文字上下的空白区域的高度*/letter-spacing: 10px; /*字符之间的间距5px*/word-spacing: 30px; /*字之间的间距设置为10px*/text-transform: capitalize; /*单词首字母大写*/}

图片的摆放：

background-position:center 整体居中

background-position:left center左居中

相应的还有右居中、上居中、下居中：right center、 top center、bottom center

外边距和内边距：（盒子模型或框）

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

元素的宽度和高度：当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度，而完全大小的元素，必须添加填充、边框和边距。

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1{height: 200px; /*高度*/width: 30%;  /*宽度*/background-color: rosybrown;  /*背景色*/border: 1px dashed red; /*div的边框形状及颜色*/}.div2{height: 200px;width: 20%;background-color: green;border: dashed red; /*div的边框形状及颜色*/}.div3{height: 50px;width: 30%;background-color: aqua;border: dashed red; /*div的边框形状及颜色*/}.div4{height: 100px;width: 30%;background-color: goldenrod;border: 30px dashed red; /*div的边框形状及颜色*/margin: 40px;  /*外边距*/padding: 20px; /*内边距*/}</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>
</html>

元素的大小是border加上padding加上content，不包括margin。

元素位置调整的参照点：

参照的是border或content：

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1{background-color: rosybrown;height: 300px;width: 300px;}.div2{background-color: green;height: 100px;width: 100px;}</style>
</head>
<body>
<div class="div1"><div class="div2"></div>
</div>
</body>
</html>

将绿色的div调整到大的淡粉色div中间：

结果：

因为div1是一个空文本的元素，并且，没有设置边框，所以div2就找不到这个div1作为参照，直接以body作为参考进行margin设置，对div1设置一个边框，或者div1中增加一个文本内容：

或者：

大盒子没有动，小盒子动了，移到大盒子中间。

上面是通过margin进行调整的，下面使用padding进行调整：

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.div1{background-color: rosybrown;height: 300px;width: 300px;padding: 100px;}.div2{background-color: green;height: 100px;width: 100px;/*margin: 100px;  !*通过margin外边距进行调整，设想是div2上下左右margin都是100则居中*!*/}</style>
</head>
<body>
<div class="div1"><div class="div2"></div>
</div>
</body>
</html>

结果：

padding的调整是大盒子进行了扩展：

可以调整大盒子的大小：

display属性：

有none、block、inline，inline-block， none是隐藏标签，block是转换为块级标签，inline是转换为内联标签，inline-block可做列表布局，即可以一行放多个标签，又可对标签进行宽高设置，其中的类似图片间的间隙小bug可以通过如下设置解决：

#outer{
border:3px dashed;
word-spacing: -5px;
}

前端技术——2——CSS相关推荐

web前端技术杂谈--css篇(1)--浅谈margin(续)
2019独角兽企业重金招聘Python工程师标准>>> 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下: css代码: .main{ ...
web前端技术之CSS语言基础与页面布局（中）
4.4CSS属性常用的CSS样式的属性有文本.字体.背景.表格.列表及定位等属性. 文本属性 <!DOCTYPE html> <html lang="en"&g ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
前端技术栈之html,css,js
目录 1.前端技术栈介绍 1.1.前端技术简介 1.2. 前端调试工具 1.2.1.HBuilder 1.2.2.webstorm 1.2.3.vscode 2. 静态页面HTML 2.1 概念 2. ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
前端技术: H5表单CSS优化
知识回顾: 1)HTML 5.0(h5)比之前版本强大很多,增加很多新的标签增强功能动画(flash内存占用泄漏,苹果ipad), 统一移动端开发(ios.安卓)重复性劳动,软件公司两支团队 2)C ...
Java云同桌学习系列（十三）——前端技术之HTML与CSS
本博客java云同桌学习系列,旨在记录本人学习java的过程,并与大家分享,对于想学习java的同学,可以跟随我的步伐一起学习,我希望这个系列能够鼓励大家一同与我学习java,成为"云同桌& ...

前端技术——2——CSS

前端技术——2——CSS相关推荐

最新文章

热门文章