Community Learn Tools Library Leisure
search
English
Home > List of blog posts > D6D7：css选择器、文本、字体
Blogger Information
Blog 7
fans 0
comment 2
visits 5340
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
D6D7：css选择器、文本、字体
虫先森
Original
586 people have browsed it

本次链接包含了选择器和文本两个部分的练习
作业代码在最后

· css选择器

选择器的意义在于获取元素

主要分为元素选择器和属性选择器
元素选择器可以指定单个或者多个元素标签，也可以通配
属性选择器主要通过选择符进行指定

css元素属性选择器

css可以对网页中对元素标签、类名、id进行选择

选择类型 选择方式 示例
元素标签 直接输入元素标签代码 div、 h1
class 通过.来表明是指定类 .area
id 通过#来表明是指定id #31

css还可以通过上下文的层级逻辑进行选择，通常使用空格、>、+、～四种符号进行指定

css上下文选择器

css可以通过层级定位选择来更加精准地选择某一个或者某一些指向

选择层级 说明
祖父级 拥有子元素和孙元素等后代元素
父级 子元素的上级元素
子级 父元素的下级元素
后代 与其他子元素有着共同的祖父
关联符号 含义 方式｜
空格 当前祖父元素之后的所有后代元素 祖父元素 后代元素{}
> 当前父元素后的所有子元素 父元素 > 子元素{}
+ 与当前元素同父级元素的下一个子元素 子元素+同级相邻下一个子元素{}
～ 与当前元素同父级元素的所有后续子元素 子元素～同级相邻开始的后续子元素{}

css伪类选择器

通常是基于文档结构的，属于类选择器，级别高于元素选择器。

主要有结构和表单两种伪类
使用“：”作为选择符号，有特定的指向选择器
指定类型：指定结构位置子元素

结构不分组伪类

选择器 描述
:first-child 指定第一个子元素
:last-child 指定最后一个子元素
:only-child 选择元素的唯一子元素
:nth-child(n) 指定顺序第n个子元素
:nth-last-child(n) 指定倒数第n个子元素

结构分组伪类

选择器 说明
:first-of-type 按类型分组后的第一个子元素
:last-of-type 按类型分组后的最后一个子元素
:only-of-type 按类型分组后的唯一个子元素
:nth-of-type() 按类型分组后的顺序第n个子元素
:nth-last-of-type() 按类型分组后的倒数第n一个子元素

nth开头的，括号中可以是数字或者表达式

表单伪类

表单对象相关
选择器 说明
:input 指定所有input元素
:text 指定所有单行文本
:password 指定所有密码框
radio 指定所有单选按钮
:checkbox 指定所有复选框
:submit 指定所有提交按钮
:image 指定所有图像域
:reset 指定所有重置按钮
:button 指定所有按钮
:file 指定所有文件域
:hidden 指定所有不可见元素
表单属性相关
选择器 说明
:enable 指定所有可用元素
:disable 指定所有不可用元素
:checked 指定所有被选中元素
:select 指定所有选中的option元素

其他伪类

选择器 描述
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:root 根元素,通常是html
:empty 选择没有任何子元素的元素(含文本节点)
:not() 排除与选择器参数匹配的元素

· 文本与字体

文本属性

文本属性主要用于控制文本的呈现样式

1.文本缩进

text-indent

该属性仅用于块级元素，行内元素只能使用 margin | padding

属性值有两种

属性值|说明|
|-|-|
|length|绝对值，数值+单位|
|percentage|百分比|

长度单位说明：

单位 说明
px 像素，相对长度，但IE无法调整
em 相对长度，与浏览器默认长度相比较

行内对齐

text-align
控制父元素中每一行的文本对齐方向

属性值 说明
left 左对齐（默认）
right 右对齐
center 居中对齐
start 对齐开始的那一边
end 对齐终止的那一边
justify 对齐两端，自动调整字符间隙，保证每行文本等长

块级对齐

纵向对齐，需要设置行高

行距与字体高度构成行内框，多个行内框构成行框，行高是行框最高和最低两端决定的

行高=字体高度+上行距+下行距

line-height 属性值

属性值 说明
normal 默认，大约是font-size*1.2
绝对值 用px、em、rem的单位
正数 根据font-size*正数计算大小，可以用小数
百分数 根据字体大小进行计算

字体属性

字体可以设置字体的族、粗细、字号大小、样式、拉伸五个方面的内容

属性 属性标签 说明
字体族 font-family 设置选用什么字体
字体粗细 font-weight 改变字体的粗细，字重
字号 font-size 字体大小
字体样式 font-style 字体的样式，常用值：默认normal；斜体italic
字体拉伸 font-strecth 字体族中有宽体或者窄体的时候可用，属性很多，查阅手册

字体族

@font-face
可以自定义字体属性

字体类型 通用字体族 说明
衬线字体 serif 字体有鲜明风格，一般首尾笔画有一定的特点，适合阅读
非衬线字体 sans-serif 字体笔画规则，比较醒目
等宽字体 monospace 字体的字母宽窄相同
草书字体 cursive 模仿人手写
艺术字体 fantasy 无规则，无法归类的都在这里
系统默认 system-ui 从浏览器获取系统默认字体，差异大
特殊样式 math 一般是数学相关字符的特殊样式
表情符号 emoji 专门用于emoji表情符号
中文仿宋 fangsong 通用的中文字体

字体粗细

属性值 说明
normal 默认
bold 比默认加粗加黑
bolder 相对父级粗细加粗加黑
lighter 相对父级粗细减粗减黑
100-900的数值 normal在100-500；bold在600-900

字号大小属性

属性值 换算
xx-small 10px
x-small 12px
small 14px
medium 16px
large 19px
x-large 24px
xx-large 32px
larger 父级字号*1.2
smaller 父级字号/1.2
绝对值数值 使用单位px、em
百分比 使用百分比rem 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>选课表</title>
  8.     <link rel="stylesheet" href="css/style.css">
  9.     <style>
  10.         :root {
  11.             background-color: lightblue;
  12.             font-family: sans-serif;
  13.             font-size: small;
  14.         }
  16.         form {
  17.             background-color: lightgreen;
  18.             text-align: center;
  19.         }
  21.         .stu_user {
  22.             border: limegreen 1px solid;
  23.         }
  25.         .stu_user input:disabled {
  26.             background-color: lightgray;
  27.             color: black;
  28.         }
  30.         input {
  31.             display: inline;
  32.         }
  34.         input[ type="text"] {
  35.             width: 70px;
  36.         }
  38.         input[ type="password"] {
  39.             width: 40px;
  40.         }
  42.         input.submit {
  43.             text-align: center;
  45.         }
  47.         .stu_user label {
  48.             margin-left: 30px;
  49.         }
  51.         .main {
  52.             border: solid lightseagreen 3px;
  53.             background-color: lightyellow;
  54.             margin-left: 0px;
  55.             display: grid;
  56.             grid-template-columns: repeat(2, 1fr);
  57.             gap: 5px;
  58.         }
  60.         .item {
  61.             border: 1px solid black;
  62.             padding: 5px 5px 5px 5px;
  63.             min-width: 180px;
  64.             display: flex;
  65.             font-size: 20px;
  66.             color: darkslategray;
  67.             background-color: white;
  68.         }
  70.         img {
  71.             width: 50px;
  72.         }
  74.         section .item:first-child {
  75.             color: darkviolet;
  76.         }
  78.         section .item:nth-child(2n) {
  79.             background-color: gainsboro;
  80.         }
  82.         section span:nth-last-of-type(2) {
  83.             color: goldenrod;
  84.         }
  86.         .xksm {
  87.             border: 1px black solid;
  88.             background-color: darksalmon;
  89.         }
  91.         .xksm h3 {
  92.             text-align: center;
  93.             font-stretch: 30px;
  94.         }
  96.         .xksm p {
  97.             font-size: 0.9rem;
  98.             text-indent: 2em;
  99.             line-height: 1.6;
  100.             border: 0px;
  101.             padding: 0px 5px 0px 5px;
  102.         }
  104.         .xksm .ts {
  105.             font-weight: bolder;
  106.             font-style: italic;
  107.             color: red;
  108.             background-color: khaki;
  109.         }
  111.         .xksm .jwc {
  112.             text-align: end;
  113.             padding-right: 20px;
  114.         }
  116.         .stu-num {
  117.             font-size: 20px;
  118.             color: rgb(71, 7, 7);
  119.         }
  120.     </style>
  122. </head>
  124. <body>
  125.     <div class="header">
  126.         <div>
  127.             <form action="dd.php" method="post" class="stu_user" id="stu_user">
  128.                 <label for="xh"> <span class="iconfont stu-num">&#xe60f;
  129.                     </span> 学号</label>
  130.                 <input type="text" name="xh" id="" disabled value="003372" />
  131.                 <label for="psw" class="psw"> <span class="iconfont">&#xe624;</span> 验证码:</label>
  132.                 <input type="password" name="psw" id="" maxlength="4" />
  133.                 <input type="submit" value="选课完成">
  134.             </form>
  135.         </div>
  136.     </div>
  137.     <div class="xksm">
  138.         <h3 class="xksm1"> <span class="iconfont">&#xe650;</span> 选课说明</h3>
  139.         <p class="xksm">
  140.             各位同学，请根据你实际上对课程的需要选择，本次选课为一次性选择，后续不提供任何修改的可能，所以请慎重决定，提交选课结果的时候，务必要填写你的学籍验证码，学籍验证码在你的选课卡右下角涂层，刮开涂层一串4位数字，你的学号和你的验证码必须匹配才能进行完成选课结果的提交。<span
  141.                 class="ts">不慎遗失选课卡的同学，请到教务处补办。</span>
  142.         </p>
  143.         <p class="jwc">教务处 <span class="iconfont">&#xe6f2;</span>
  144.             <br>
  145.             2020年3月18日
  146.         </p>
  147.     </div>
  148.     <section class="main">
  149.         <div class="item"><input type="checkbox" value="kc01" name="xk" id="kc01" class="xk" form="stu_user"
  150.                 checked><label for="kc01"> <span class="iconfont">&#xe6d0;</span> 公共关系</label></div>
  151.         <div class="item"><input type="checkbox" value="kc02" name="xk" id="kc02" class="xk" form="stu_user"><label
  152.                 for="kc02"></label>
  153.             <span class="iconfont">&#xe6d0;</span> 社会经济</label> </div>
  154.         <div class="item"><input type="checkbox" value="kc03" name="xk" id="kc03" class="xk" form="stu_user"><label
  155.                 for="kc03">
  156.                 <span class="iconfont">&#xe6d0;</span> 政治经济</label></div>
  157.         <div class="item"><input type="checkbox" value="kc04" name="xk" id="kc04" class="xk" form="stu_user"><label
  158.                 for="kc04">
  159.                 <span class="iconfont">&#xe6d0;</span> 市场营销</label></div>
  160.         <span class="item"><input type="checkbox" value="kc05" name="xk" id="kc05" class="xk" form="stu_user"><label
  161.                 for="kc05">
  162.                 <span class="iconfont">&#xe6d0;</span> 国际贸易</label></span>
  163.         <span class="item"><input type="checkbox" value="kc06" name="xk" id="kc06" class="xk" form="stu_user"><label
  164.                 for="kc06">
  165.                 <span class="iconfont">&#xe6d0;</span> 企业管理</label></span>
  166.         <span class="item"><input type="checkbox" value="kc07" name="xk" id="kc07" class="xk" form="stu_user"><label
  167.                 for="kc07">
  168.                 <span class="iconfont">&#xe6d0;</span> 中国税法</label></span>
  169.         <span class="item"><input type="checkbox" value="kc08" name="xk" id="kc08" class="xk" form="stu_user"><label
  170.                 for="kc08">
  171.                 <span class="iconfont">&#xe6d0;</span> 会计基础</label></span>
  172.     </section>
  173. </body>
  175. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：作业总结没有写
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post