摘要
CSS是用来美化网页的样式表，可以设置文字样式、图片外观、版块布局等。它由选择符和申明两部分构成，每个申明可以有一个或多个值，以分号结尾。让我们一起来打造漂亮的网页吧！
正文
CSS（1）基本英语的语法、普遍特性
CSS
- CSS：堆叠css样式表。关键用以设定HTML网页页面中的文字內容（字体样式、尺寸、两端对齐方法等）、照片的外观设计（高宽、外框款式、行高等）及其版块的合理布局等外型表明款式。
- CSS英语的语法：CSS案例由选择符，及其一条或好几条申明（特性）两一部分构成。每一个申明（特性）能够有一个或好几个值。特性合值被灶具分离。CSS申明以分号;完毕，申明以大括号{}括起來。
p { color: red; }
- CSS注解：CSS中仅适用应用/* */开展注解
/* 我是注解內容 */
- CSS引进：引进CSScss样式表的方式 有三种。外界css样式表、內部css样式表、内联样式。
<head> <!-- 引进外界款式文档（强烈推荐）:<link>标识在写在<head>标识内。外界css样式表文档不可以包括一切的HTML标识。css样式表应当以.css后缀名开展储存。 href：界定所连接外界css样式表文档的URL，能够是绝对路径，还可以是相对路径。 type：界定所连接文本文档的种类，在这儿必须特定为“text/CSS”，表明连接的外界文档为CSScss样式表。 rel：界定当今文本文档与被连接文本文档中间的关联，在这儿必须特定为“stylesheet”，表明被连接的文本文档是一个css样式表文档。 --> <link type="text/css" rel="styleSheet" href="./study.css" /> </head> <body> <!-- 行内样式：英语的语法中style是标识的特性，事实上一切HTML标识都有着style特性，用于设定内行人式。在其中特性合值的撰写标准与CSS款式标准同样，内行人式只对其所属的标识及嵌入在这其中的子标识起功效。 --> <div style="font-style:italic; color:blue;"> Hello there</div> <div class="a"> Hello A</div> <!-- 內部款式：英语的语法中，style标识一般坐落于head标识中title标识以后，还可以把他放到HTML文本文档的任何地方。 --> <style> .a { color: red; } </style> </body>
CSS选择符
- CSS选择符（一）：用以选择网页页面上的某一标识，在CSS中称之为选择符。
- 使用通配符选择符：使用通配符选择符是以*选择全部标识。
- 标签选择器：立即应用标识名选择该标识名的全部标识。
- id选择器：id选择器能够选择到标着该id特性的HTML标识。id选择器以”#”来界定。一个原素只有有一个ID
- 类选择器：类选择器能够选择到标着该class属性的HTML标识。类选择器以”.”来界定。class选择符不同于id选择器，class属性能够在好几个标识中应用。也适用一个标识中有好几个class属性值（用空格符分隔）。
<!-- 类能够在同一个标识上面有好几个值 --> <div class="a b c"> Hello A</div> <!-- 类能够在好几个标识上应用 --> <div class="a b"> Hello B</div>
/* 使用通配符选择符 */ * { color: gray; } /* id选择器 */ #china { color: red; } /* 类选择器 */ .america { color: green; } /* 标签选择器 */ li { color: yellow; }
- CSS选择符（二）：
- 后台管理选择符：2个原素用空格符分隔，而且选定的是原素1全部等级的子孙后代
- 后代选择符：只有挑选子原素
- 或且选择符：或且选择符正中间用分号分隔，适用随意别的选择符，好几个原素规定竖着写
- 伪类选择器：伪类选择器表明的是同一个标识，依据其不一样的种情况，有不一样的款式。比如<a>标识有点一下前和点一下后二种情况。
<body> <ol class="haha"> <li>1</li> <li> <p>我是孩子</p> </li> <li>3</li> <p>我是小孙子</p> </ol> <div>熊大</div> <p>熊二</p> <span>光头强</span> <a href="http://www.baidu.com">百度一下</a> <input> </body> <style> /* 后台管理选择符：2个原素用空格符分隔，而且选定的是原素1全部等级的子孙后代 */ .haha p { color: green; } /* 后代选择符：只有挑选子原素 */ .haha>p { color: red; } /* 或且选择符：或且选择符正中间用分号分隔，适用随意别的选择符，尽可能竖着写 */ div, p, .haha>a { color: pink; } /* 伪类选择器：伪类选择器表明的是同一个标识，依据其不一样的种情况，有不一样的款式。比如<a>标识有点一下前和点一下后二种情况。留意：一定先写静态数据伪类，后写动态性伪类。 1.静态数据伪类：只有用以网页链接的款式。 :link。网页链接点一下以前（主要是能区别是否含有href的<a>标识） :visited。连接被浏览过以后 2.动态性伪类：对于全部标识都可用的款式。 :hover。悬停，电脑鼠标放进标识上的情况下 :active。激话，鼠标单击标识，可是不放手时。 :focus。是某一标识得到聚焦点时的款式（一般用以文本框得到聚焦点） */ /* 让网页链接点一下以前 */ a:link { color: red; } /* 让网页链接点一下以后 */ a:visited { color: orange; } /* 鼠标悬停，放进标识上的情况下 */ a:hover { color: green; } /* 鼠标单击连接，可是不放手的情况下（激话） */ a:active { color: black; } /* 文本框获得聚焦点时 */ input:focus { background-color: palegoldenrod; }
CSS常见特性
- CSS度量单位：
| 公司名称 | 表明 | 事例 |
|---|---|---|
| Piexels(清晰度) | 一个清晰度的尺寸依据客户显示器尺寸和屏幕像素密度不一样而设置 | .classname { margin:5px; } |
| Points(磅) | 一英镑相当于一英寸的1/72，来自包装印刷情况设计方案。 | .classname { margin:5pt; } |
| Inches(英尺) | 1英寸等同于72欧元 | .classname { margin:5in; } |
| Centimeters(公分) | 1厘米比28欧元稍大一些 | .classname { margin:5厘米; } |
| Millimeters(mm) | 1毫米相当于1/10cm(约为3磅) | .classname { margin:5毫米; } |
| Picas | Picas是另一种包装印刷度量单位，相当于12磅 | .classname { margin:5pc; } |
| Ems | 一个em相当于当今字体样式的尺寸，用以叙述相对性规格 | .classname { margin:5em; } |
| Exs | 也与当今文字大小相关，相当于英文字母x的高宽比，不常见 | .classname { margin:5ex; } |
| Percent(百分数) | 这一企业与em有关，它是相对性企业 | .classname { margin:125%; } |
- 字体样式有关特性：可以用CSS设定的四种关键的字体样式特性：family(字体样式族)、style(款式)、size(尺寸)和weight(大小)。字体样式一般立即设定在body上用以操纵全部网页页面。
- font-family：设定文字的字体样式
- font-size：设定文字的文字大小
- font-style：设定文字的字体效果（一切正常normal、斜体字italic、歪斜oblique）
- font-weight：设定文字的字体样式大小
<style> div { height: 50px; width: 50px; } #cqz { /* 设定文字的字体样式系列产品：楷体、宋体字等（不强烈推荐中国汉字，强烈推荐使用英语）。能够设定好几个，当今一个电脑浏览器不兼容的情况下，用第二个，依此类推 */ font-family: "楷体"; /* 设定文字的文字大小：能够应用px、em、百分数。不一样浏览器字体默认设置尺寸不一样，因此务必设置文本初始值。h1等文章标题标识必须独立特定文字大小。 */ font-size: 16px; /* 设定文字为斜体字：默认设置normal是一切正常字体样式 */ font-style: italic; /* 设定文字大小：主要是normal和bold这两个值。blod为字体加粗。或是能够应用数据（留意不必有企业） */ font-weight: 700; /* 复合型书写：前2个能够省去，后2个不可以省去。 */ font: font-style font-weight font-size font-family; } </style> <body> <div id="cqz">曹</div> </body>
- 文字有关特性：
- color：文字色调。
- text-align：设定文字的水准两端对齐方法。左两端对齐(left)、右两端对齐(right）、垂直居中(center)和两端对齐(justify)。
- line-height：设定文字竖直的两端对齐方法（行高）【完成基本原理：行高由文本高宽比 左右间隙构成，当父类有高宽比，则会全自动铺满左右间隙，确保文字居中。】
- word-spacing：设定文字字符间距
- letter-spacing：设定英语单词和字符间距
- text-transform：设定文字变换。无、首写字母大写、英文大写和小写字母。
- text-decoration：设定文字装饰设计。下横线、删除线、上划线、闪动等。
- text-indent：设定首行文字缩近间距。
#cqz { /* 设定文字色调（实际设定方法见下文CSS中色调界定） */ color: #00f0ff; /* 设定文字水准两端对齐方法：左两端对齐(left)、右两端对齐(right）、垂直居中(center)和两端对齐(justify)。 */ text-align: center; /* 设定文字竖直两端对齐方法（设定行高，当行高与父器皿的高宽比同样时且文本仅有一行，则文字垂直居中） */ line-height: 100px; /* 设定文字装饰设计：下横线（underline）、删除线（line-through）、上划线（overline）、闪动（blink）等。留意：<a>标识初始值为underline，要想除去<a>标识的下横线，就将text-decoration设定为none */ text-decoration: line-through; /* 设定文字缩近：一般设定为em，意味着当今字体大小的间距，是一个相对性企业 */ text-indent: 2em; } a { /* 除去<a>标识的默认设置下横线 */ text-decoration: none; }
- CSS中色调界定：W3C标准化机构界定的规范的16中色调的名字分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红色)、gray(灰)、green(绿)、lime(绿黄)、maroon(这样)、navy(深蓝色)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还能够应用十六进制RGB：#ff0000、#00ff00、#0000ff等。还能够应用rgb涵数【rgb(0,255,255)】
#cqz { /* RGB涵数 */ color: rgb(0, 255, 255); /* 十六进制RGB */ color: #fff000; /* W3C标准色 */ color: red; }
- 情况特性：
- background-color：设定背景色
- background-image：设定背景图案
- background-repeat：设定背景图案反复/铺平方法
- background-position：设定背景图案精准定位
- background-attachment：设定背景图案是不是固定不动或是伴随着网页页面的一部分翻转
- background-size：设定背景图案尺寸【CSS3之前，背景图像尺寸由图象的具体尺寸决策】
- background：复合型书写。随意特性都能够省去。
<body> <div class="cqz"></div> </body> <style> * { margin: 0; padding: 0; } .cqz { margin-top: 50px; margin-left: 50px; height: 1001080x; width: 1001080x; border: 1px solid red; /* 设定背景色 */ background-color: rgb(0, 0, 0); /* 设定背景图案：默认设置反复布满小盒子 */ background-image: url("../images/123.webp"); /* 设定背景图案反复铺平方法： 1.repeat 竖直方位和水平方向反复。【默认设置】 2.repeat-x 水平方向反复。 3.repeat-y 竖直方位反复。 4.no-repeat 背景图像将仅表明一次（不反复）。 */ background-repeat: no-repeat; /* 设定背景图案精准定位：一般提议图标和超大图片应用情况开展设定而不是<img> 1.必须有两个值。 2.假如仅要求了一个关键字，那麼第二个值将是center。 3.方位名词： top left center right（方位名词不区别设定次序） 4.清晰度/百分数： 设定清晰度值时，第一个值是x轴，第二个值是y轴。 */ /* background-position: center top; */ background-position: 50% 100%; /* 设定背景图案尺寸：假如设定了图片尺寸，照片会被全自动拉申或缩小到设定的尺寸。 */ background-size: 1001080x 1001080x; /* 设定背景图案是不是固定不动或是伴随着网页页面的一部分翻转 1.scroll 初始值。背景图像会伴随着网页页面一部分的翻转而挪动。 2.fixed 当网页页面的一部分翻转时，背景图像不容易挪动。 */ background-attachment: fixed; /* 复合型书写：适用省去随意特性 */ /* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */ } </style>
原素表明方式
- 原素表明方式：在CSS中，依据原素表明方式的不一样原素标识被分成了两大类。行内元素（inline-level）、块级元素（block-level）。
- 行内元素：行内元素便是不容易独享一行的原素，行内元素不可以设定总宽和高宽比。它的总宽和高宽比会伴随着文字的更改而该更改。內部不可以填好块级元素。比如：<span> <buis> <strong> <em> <ins> <del>等；
- 块级元素：块级元素便是会独享一行的原素，块级元素能够设定总宽和高宽比，要是没有设定总宽和高宽比，默认设置父原素一样宽，高宽比则为0。比如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
- 内行人块级元素：因为大家有的情况下不但要设定原素的总宽和高宽比，另外也期待原素不容易独享一行，这时候就发生了内行人块级元素（inline-block）。同一行的内行人块级元素会出现空缺间距。比如<img><input><td>等。
- 变换CSS原素的表明方式：设定原素的display特性。inline（内行人）、block（块级）、inline-block（内行人块级）
<body> <span>我是行内元素，被转化成了块级元素</span> <div>我是块级元素，被转化成了行内元素</div> <img src="../images/1.webp"><img src="../images/1.webp"> </body> <style> * { margin: 0; padding: 0; } /* 将span变换为块级元素 */ span { display: block; background-color: red; width: 401080x; height: 201080x; } /* 将div变换为内行人块级元素 */ div { display: inline-block; background-color: green; width: 301080x; height: 301080x; } /* 将img变换为块级元素 */ img { display: block; width: 201080x; } </style>
CSS三大特点
- CSS三大特点：CSS的三个特点就是指堆叠性、传递性及其优先。
- 堆叠性：堆叠性是在HTML中针对同一个原素能够有好几个CSS款式存有，当有同样权重值的款式存有时，会依据这种款式撰写的顺序来决策，处在最终面的CSS款式可能遮盖前边的CSS款式。
- 传递性：子标识会承继父标识的一些款式，如文字色调和字体大小。要想设定一个可承继的特性，只需将它运用于父原素就可以。合理使用承继能够简单化编码，减少CSS款式的多元性。针对字体样式、字体大小、色调、行间距等文字类特性具备传递性，都能够在body中统一设定，随后危害文本文档中全部文字。可是，并非是全部的CSS特性都能够承继，如外框、外边距、内边距、情况、精准定位、原素高宽比等与块级元素有关的特性也不具备传递性。
- 优先：在繁杂CSScss样式表，经常会出现2个或好几个不一样款式标准运用在同一原素上，这时候究竟选用哪一个款式呢？这就是典型性的CSS优先难题。测算优先有以下标准：承继 < 原素选择符 < 类选择器/伪类选择器 < ID选择符 < 行内样式 < !important
- 承继款式的权重值为0：在嵌入构造中，不管父原素款式权重值多少，子原素承继时，运用在子原素上的权重值都为0，即子元素定义的款式会遮盖全部承继来的款式。
- 行内样式优先选择：运用style特性的原素，其行内样式的权重值十分高，能够了解为远高于100。总而言之，他有着比上边提升的选择符都大的优先。
- 就远原则：权重值同样时，CSS遵照就远原则。换句话说挨近原素的款式具备较大 的优先，换句话说排在最终的款式优先较大 。
- !important指令：CSS界定了一个!important指令，该指令被授予较大 的优先。换句话说无论权重值怎样及其款式部位的近远，!important都具备较大 优先。
- 权重值会累加，可是始终不容易进位。（下边解读权重值累加难题）
<style> div { height: 100px; /* 堆叠性：该特性会被同权重值CSS遮盖 */ width: 50px; margin-left: 50px; border: black 1px solid; /* 传递性：该特性会褥子标识承继 */ font-size: 20px; /* 传递性：该特性会褥子标识遮盖 */ font-family: "楷体"; } div { /* 堆叠性：该特性会遮盖上边的同权重值CSS */ width: 60px; } p { font-family: "微软雅黑"; } </style> <body> <div> <p>曹老三</p> </div> </body>
- 权重值累加难题：每一种选择符的权重值见下边报表。款式承继的权重值为0，复合型选择符使权重值累加，权重值中间不可以越境，11个类都没有id的权重特大
| 选择符 | 权重值 |
| 0000 | 0000 |
| 标签选择器 | 0001 |
| 类选择器与伪类选择器 | 0010 |
| ID选择符 | 0100 |
| 行内样式 | 1000 |
| !important | ∞ |
<body> <div class="father" id="fatherid"> <div class="child1" id="child1Id">小孩1</div> </div> </body> <style> * { margin: 0; padding: 0; /* 权重值为0 */ background-color: pink; } .child1 { /* 权重值为0010 */ background-color: red; } .father .child1 { /* 权重值为0020 */ background-color: black; } #fatherid .child1 { /* 权重值为0110 */ background-color: green; } #child1Id { /* 权重值为0100 */ background-color: wheat; } #fatherid #child1Id { /* 权重值为0200 */ background-color: greenyellow; } .child1 { /* 权重值为 ∞ */ background-color: hotpink !important; } </style>
关注不迷路
扫码下方二维码，关注宇凡盒子公众号，免费获取最新技术内幕！
温馨提示：如果您访问和下载本站资源，表示您已同意只将下载文件用于研究、学习而非其他用途。
评论0