认识CSS中css引入方式、选择器、文本样式设置以及显示模式

2022-10-27 15:14:21

前端之HTML、CSS（三）

　　CSS

　　CSS-Cascading Styles Sheets，层叠样式表。用于网页的表现，主要用于布局和修饰网页。

　　CSS引入方式

　　CSS的三种引入方式：行内样式，内部样式表，外部样式表。

　　行内样式：通过标签的style属性设定样式，基本语法：<标签名 style="属性1：属性值1；属性2：属性值2；...">内容</标签名>。

 <!DOCTYPE html>

 <html>

 <head>

     <title>行内样式-测试</title>

 </head>

 <body>

     <h4 style="color: red; font-size: 25px">行内样式</h4>

 </body>

 </html>

　　内部样式表：使用<style>标签将CSS代码集中写在HTML文档的<head>标签中，基本语法：<head><style type="text/css>选择器{属性1：属性值1；属性2：属性值2；...}</style></head>。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>内部样式-测试</title>

     <style type="text/css">

         h3{

             color: red;

             font-size: 25px;

         }

         p{

             color: gray;

             font-size: 20px;

         }

     </style>

 </head>

 <body>

     <h3>内部样式</h3>

     <p>内部样式表使用&lt;style&gt;标签将CSS代码集中写在HTML文档的&lt;head&gt;标签中</p>

 </body>

 </html>

　　外部样式表：将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中，通过<link>标签将外部样式表文件链接到HTML文档中，基本语法：<head><link href="css文件路径"，type="text/css"，rel="stylesheet" /></head>。其中href、type、rel三个属性是必须属性，href属性值为css文件路径，一般为相对路径；type属性值为text/css，表示链接文件为css样式表；rel属性值为stylesheet，指定链接文档类型为css文件。

　　HTML文档

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>外部样式-测试</title>

     <link rel="stylesheet" type="text/css" href="css/test2_css.css">

 </head>

 <body>

     <h3>外部样式</h3>

     <p>将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中。</p>

 </body>

 </html>

　　CSS文件

 h3 {

     color: red;

     font-size: 25px;

 }

 p {

     color: gray;

     font-size: 20px;

 }

　　文件结构

　　CSS基础选择器

　　在内部样式表和外部样式表中都使用了CSS样式，CSS样式规则：选择器 {属性1：属性值1；属性2：属性值2；...}。

　　标签选择器：使用HTML标签名作为选择器。格式：标签名 {属性1：属性值1；属性2：属性值2；...}。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>CSS基本选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <p>CSS基本选择器</p>

     <div>CSS基本选择器</div>

 </body>

 </html>

　　css

 p {

     font-size: 20px;

 }

 div {

     font-size: 25px;

 }

　　类选择器：在HTML标签中添加class属性，<标签名 class="属性值">content</标签名>，在CSS文件中使用 .属性值 { 属性1：属性值1；属性2：属性值2；...}。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>CSS基本选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div class="first">类选择器</div>

     <div class="second">类选择器</div>

 </body>

 </html>

　　css

 .first {

     font-size: 20px;

 }

 .second {

     font-size: 25px;

 }

　　多类名选择器：在HTML标签中class属性只能添加一个，但是属性值可以是多个，<标签名 class="属性值1 属性值2">content</标签名>，表现在CSS文件中为 .属性值1 { 属性1：属性值1；属性2：属性值2；...} \n .属性值2 { 属性1：属性值1；属性2：属性值2；...}。以此形式为HTML标签赋予多种样式。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>多类名选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div class="fontc fonts">多类名选择器</div>

     <p class="fontc">多类名选择器</p>

 </body>

 </html>

css

 .fontc {

     color: red;

 }

 .fonts {

     font-size: 40px;

 }

　　注意：多个类名之间使用空格隔开，类名表现为class属性的属性值。即<标签名 class="类名1 类名2 ...">。多种CSS样式如果属性有相同，后写入的CSS样式会覆盖前写入的CSS样式属性，即只看CSS文件中属性的写入的前后关系，而与HTML文档中class属性值调用前后无关。

　　ID选择器：同类选择器使用方式相似，在HTML标签中添加id属性，<标签名 id="属性值">content</标签名>，在CSS文件中使用 #属性值 { 属性1：属性值1；属性2：属性值2；...}。

html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>ID选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div id="first">ID选择器</div>

     <div>ID选择器</div>

     <div>ID选择器</div>

     <div id="last">ID选择器</div>

 </body>

 </html>

css

 #last {

     color: red;

 }

 #first {

     font-size: 40px;

 }

　　注意：ID选择器和类选择器的区别在于调用次数，ID对任何一个HTML标签来说是唯一，再调用时也只能在单个标签中调用一次。

　　通配符选择器：选择器使用通配符 * 表示，* 表示HTML中所有标签，是广义上的标签选择器。在CSS文件中使用 * {属性1：属性值1；属性2：属性值2；...}。不推荐使用

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>通配符选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <h1>通配符选择器</h1>

     <div>通配符选择器</div>

     <p>通配符选择器</p>

     <span>通配符选择器</span>

 </body>

 </html>

　　css

 * {

     color: blue;

 }

　　CSS复合选择器

　　复合选择器就是利用多个基本选择之间的组合来定位元素内容。

　　后代选择器：当标签存在嵌套关系，标签之间就存在父子关系了。外层标签是内层标签的“长辈”，嵌套一层为父标签，两层为祖父标签，三层及以上为祖先标签；同理，内层标签为“晚辈”，嵌套一层为子标签，两层为孙子标签，三层及三层以上为祖孙标签。后代选择器利用父子关系，由“长辈”到“晚辈”的顺序，依次以空格间隔来定位“晚辈”标签中内容。基本语法：父标签名子标签名 {属性1：属性值1；...}

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>后代选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <!-- div 为 p 的父标签，为 span 的祖父标签 -->

     <div>

         <!-- p 为 div 的子标签，为 span 的父标签 -->

         <p>

             <!-- span 为 div 的孙子标签，为 p 的子标签 -->

             <span>后代选择器</span>

         </p>

     </div>

 </body>

 </html>

　　css

 div p span {

     font: oblique bolder 30px "Microsoft YaHei";

     color: rgb(50%, 50%, 70%);

 }

　　当需求变为：当目标内容在<div><p>des-content</p></div>中,又存在多个此形式标签，标签名可以换作类名加以区别，准确定位元素。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>后代选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div class="div_red">

         <p>123</p>

     </div>

     <div>

         <p>456</p>

     </div>

     <div>

         <p class="p_blue">789</p>

     </div>

 </body>

 </html>

　　css

 /*需求:123为红色显示,456为黑色显示,789为蓝色显示;*/

 .div_red p {

     color: red;

 }

 div .p_blue {

     color: blue;

 }

　　子代选择器：明确一点，儿子、孙子或者祖孙都是应该是子代，如果只是定位子代可以使用后代选择器，而子代选择器只是作用儿子标签。基本语法：父标签名 > 子标签名 {属性1：属性值1；...}。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>子代选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div>

         <span>后代选择器</span>

         <p>

             <span>后代选择器</span>

         </p>

     </div>

     <div>

         <span>子代选择器</span>

         <p>

             <span>子代选择器</span>

         </p>

     </div>

 </body>

 </html>

　　css

 div span {

     color: red;

 }

 div>span {

     color: blue;

 }

　　效果显示

　　原因解释：CSS代码由上至下进行加载，第一部分CSS样式是使用后代选择器，<div>标签中所有<span>标签均设置为红色，加载完毕时，四行文本应该均为红色；第二部分CSS样式使用子代选择器，<div>标签中属于<div>儿子标签的<span>标签均被蓝色覆盖，由此出现上图情况。

　　注意:可以使用标签名（类名）>标签名（类名）>标签名（类名）>...一级一级往下定位。

　　多项选择器：多个目标内容分布于多个且多种标签内，设定统一格式，使用多项选择器。基本语法：标签1，标签2，标签3，...{属性1：属性值1；...}，表示标签1、标签2、标签3中内容样式一致。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>多项选择器-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <h1>多项选择器</h1>

     <p>多项选择器</p>

     <span>多项选择器</span>

     <div>多项选择器</div>

 </body>

 </html>

　　css

 h1, p, div {

     color: red;

 }

　　伪类选择器

　　链接伪类选择器：a:link { }、a:visited { }、a:hover { }、a:active { }分别表示：未访问的链接、已访问的链接、鼠标悬停的链接、选定的链接。使用时，顺序不要颠倒。“lvha-love hate”。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>链接伪类选择器-测试</title>

     <style type="text/css">

         a:link {

             color: blue;

             font-size: 50px;

             text-decoration: none;

         }

         a:visited {

             color: green;

         }

         a:hover {

             color: red;

         }

         a:active {

             color: orange;

         }

     </style>

 </head>

 <body>

     <a href="http://www.baidu.com", target="_blank">百度</a>

 </body>

 </html>

　　CSS字体样式属性

　　font-size：设置文字大小，属性值的单位可以使用绝对单位长度，也可以使用相对单位长度。推荐使用相对单位长度。相对单位长度：em（相对于当前对象文本的字体尺寸，一般为1em为16px）、px(像素单位)；绝对单位长度：in、cm、mm。

font-family：设置字体。属性值使用偶数大于14px字号，多个字体使用英文逗号隔开，中文字体或者英文字体含空格、#等字符需要引号引入，英文字体一般不需要引号引入。字体属性值可以设置多个，按照系统是否含有依次读取。

字体的Unicode编码
中文名称	英文名称	Unicode编码
宋体	Simsun	\5B8B\4F53
新宋体	NSimsun	\65B0\5B8B\4F53
黑体	SimHei	\9FD1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

　　font-weight：设置字体的粗细，属性值可以为normal（400），bold（700），bolder、lighter。

　　font-style：设置字体风格，属性值为normal（标准字体）、italic（斜体）、oblique（文字倾斜显示）。

　　font：综合设置字体格式，基本语法：选择器 {font：font-style属性值 font-weight属性值 font-size属性值/line-height属性值 font-family属性值;}，字体格式设置必须按照语法顺序写，必须保留font-size、font-family属性，其他属性可以使用默认属性值。"斜粗大体"

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>font属性-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <p>font属性设置</p>

 </body>

 </html>

　　css

 p {

     font: italic 400 20px sans-serif,"宋体","Microsoft YaHei";

 }

　　注意：上述css可以调整顺序进行测试。

　　CSS外观属性

　　color：定义文本颜色，三种取值方式：定义颜色（red、green、blue）；十六进制（#FF0000、#FF6600、#29D794）；RGB代码（rgb（255，0，0）或者rgb（100%，0%，0%））。

　　注意：十六进制表示颜色，两连字符相同可以简写为一个，#FF0000可以表示为#F00，#FF6600可以表示为#F60。

　　line-height：设置行间距，使用单位长度：px、em、%。当行高和盒子高度相等时，可以使单行文本垂直居中；行高大于盒子高度，文本会偏下，反之偏上。

　　text-align：设置文本内容的对齐方式，属性值有：left、center、right。

　　text-indent：设置首行文本的缩进，使用单位长度：px、em、%，允许使用负值，1em相当于一个汉字的宽度。

　　text-decoration：设置文本装饰，属性值有：none（无装饰）、underline（下划线）、line-through（删除线）、overline（上划线）。

　　html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>CSS外观属性-测试</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div class="first_div">CSS外观属性</div>

     <div class="second_div">CSS外观属性</div>

     <div class="third_div">CSS外观属性</div>

     <div>CSS外观属性</div>

     <div>CSS外观属性</div>

     <div class="last_div">CSS外观属性</div>

 </body>

 </html>

　　css

 .first_div {

     color: red;

     line-height: 20px;

     text-align: center;

     text-decoration: underline;

 }

 .second_div {

     color: #f60;

     text-align: left;

     text-indent: 2em;

     text-decoration: line-through;

 }

 .third_div {

     text-indent: -2em;

     line-height: 30px;

 }

 .last_div {

     color: rgb(255,255,0);

     text-align: right;

     text-decoration: overline;

 }

　　标签的显示模式

　　块级元素：通常独占一整行或者多个整行，可以设置宽度、高度以及对齐方式等属性，常用于网页布局和网页结构搭建。常见块级元素有：<h1>-<h6>、<div>、<p>、<ul>、<ol>、<li>标签等。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>块级元素测试</title>

     <style type="text/css">

         div {

             width: 100px;

             height: 100px;

             background: gray;

         }

     </style>

 </head>

 <body>

     <div></div>

 </body>

 </html>

　　行内元素：不占独立的区域，只占有自身内容（文字、图片）的大小的区域，一般情况下不可设置宽度、高度以及对齐方式等属性，常用于控制页面内容显示的样式。常见行内元素有：<a>、<span>、<strong>、<b>、<em>、<i>、<ins>、<u>、<del>、<s>标签等。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>行内元素测试</title>

     <style type="text/css">

         span {

             width: 100px;

             height: 100px;

             background: gray;

         }

     </style>

 </head>

 <body>

     <span>行内元素</span>

 </body>

 </html>

　　行内块元素：不独占一整行，与相邻行内元素在一行，会存在空白缝隙，但是可以设置宽度、高度以及对齐方式等属性。常见行内块元素有：<image />、<input />、<td>标签等。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>行内块元素测试</title>

     <style type="text/css">

         input {

             width: 200px;

             height: 25px;

         }

     </style>

 </head>

 <body>

     <input type="" name="">

     <input type="" name="">

 </body>

 </html>

　　块-行内-行内块相互转换：使用display属性设定可以对三种显示模式改变：display:inline转换为行内元素；display：block转换为块级元素；display：inline-block转换为行内块元素。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>显示模式转换-测试</title>

     <style type="text/css">

         div {

             width: 100px;

             height: 100px;

             background-color: gray;

             display: inline;

         }

         span {

             width: 40px;

             height: 40px;

             background-color: red;

             display: block;

         }

         a {

             width: 80px;

             height: 40px;

             background-color: blue;

             display: inline-block;

         }

     </style>

 </head>

 <body>

     <div>123</div>

     <div>123</div>

     <span>abc</span>

     <span>abc</span>

     <a href="http://www.baidu.com">百度</a>

     <a href="http://www.baidu.com">百度</a>

 </body>

 </html>

　　导航栏案例

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>导航栏-测试</title>

     <style type="text/css">

         .nav {

             width: 800px;

             height: 50px;

             margin: 0 auto;

         }

         .nav a {

             width: 120px;

             height: 50px;

             display: inline-block;

             background-image: url(images/bg.png);

             text-align: center;  /*文本水平居中*/

             line-height: 50px;  /*单行文本垂直居中方式*/

             font-weight: bold;

             font-size: 14px;

             color: #fff;

             text-decoration: none;

         }

         a:hover {

             background-image: url(images/bgc.png);

         }

     </style>

 </head>

 <body>

     <div class="nav">

         <a href="#">公司首页</a>

         <a href="#">公司介绍</a>

         <a href="#">产品介绍</a>

         <a href="#">资料下载</a>

         <a href="#">新闻浏览</a>

         <a href="#">联系我们</a>

     </div>

 </body>

 </html>

码农公寓

前端之HTML、CSS（三）

CSS

CSS引入方式

CSS基础选择器

CSS复合选择器

伪类选择器

CSS字体样式属性

CSS外观属性

标签的显示模式

相关文章

　　CSS

　　CSS引入方式

　　CSS基础选择器

　　CSS复合选择器

　　伪类选择器

　　CSS字体样式属性

　　CSS外观属性

　　标签的显示模式