search

博客列表 >D6D7：css选择器、文本、字体

D6D7：css选择器、文本、字体

虫先森
虫先森原创
2020年04月08日 03:55:02583浏览

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

· 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>
上一条：【Centos】/var/run/yum.pid 已被锁定，PID 为 XXXXX 的另一个程序正在运行。下一条：css选择器基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多