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

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

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

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

· css选择器

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

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

css元素属性选择器

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

选择类型 选择方式 示例
元素标签 直接输入元素标签代码 divh1
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">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>选课表</title>
  7. <link rel="stylesheet" href="css/style.css">
  8. <style>
  9. :root {
  10. background-color: lightblue;
  11. font-family: sans-serif;
  12. font-size: small;
  13. }
  14. form {
  15. background-color: lightgreen;
  16. text-align: center;
  17. }
  18. .stu_user {
  19. border: limegreen 1px solid;
  20. }
  21. .stu_user input:disabled {
  22. background-color: lightgray;
  23. color: black;
  24. }
  25. input {
  26. display: inline;
  27. }
  28. input[ type="text"] {
  29. width: 70px;
  30. }
  31. input[ type="password"] {
  32. width: 40px;
  33. }
  34. input.submit {
  35. text-align: center;
  36. }
  37. .stu_user label {
  38. margin-left: 30px;
  39. }
  40. .main {
  41. border: solid lightseagreen 3px;
  42. background-color: lightyellow;
  43. margin-left: 0px;
  44. display: grid;
  45. grid-template-columns: repeat(2, 1fr);
  46. gap: 5px;
  47. }
  48. .item {
  49. border: 1px solid black;
  50. padding: 5px 5px 5px 5px;
  51. min-width: 180px;
  52. display: flex;
  53. font-size: 20px;
  54. color: darkslategray;
  55. background-color: white;
  56. }
  57. img {
  58. width: 50px;
  59. }
  60. section .item:first-child {
  61. color: darkviolet;
  62. }
  63. section .item:nth-child(2n) {
  64. background-color: gainsboro;
  65. }
  66. section span:nth-last-of-type(2) {
  67. color: goldenrod;
  68. }
  69. .xksm {
  70. border: 1px black solid;
  71. background-color: darksalmon;
  72. }
  73. .xksm h3 {
  74. text-align: center;
  75. font-stretch: 30px;
  76. }
  77. .xksm p {
  78. font-size: 0.9rem;
  79. text-indent: 2em;
  80. line-height: 1.6;
  81. border: 0px;
  82. padding: 0px 5px 0px 5px;
  83. }
  84. .xksm .ts {
  85. font-weight: bolder;
  86. font-style: italic;
  87. color: red;
  88. background-color: khaki;
  89. }
  90. .xksm .jwc {
  91. text-align: end;
  92. padding-right: 20px;
  93. }
  94. .stu-num {
  95. font-size: 20px;
  96. color: rgb(71, 7, 7);
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. <div class="header">
  102. <div>
  103. <form action="dd.php" method="post" class="stu_user" id="stu_user">
  104. <label for="xh"> <span class="iconfont stu-num">&#xe60f;
  105. </span> 学号</label>
  106. <input type="text" name="xh" id="" disabled value="003372" />
  107. <label for="psw" class="psw"> <span class="iconfont">&#xe624;</span> 验证码:</label>
  108. <input type="password" name="psw" id="" maxlength="4" />
  109. <input type="submit" value="选课完成">
  110. </form>
  111. </div>
  112. </div>
  113. <div class="xksm">
  114. <h3 class="xksm1"> <span class="iconfont">&#xe650;</span> 选课说明</h3>
  115. <p class="xksm">
  116. 各位同学,请根据你实际上对课程的需要选择,本次选课为一次性选择,后续不提供任何修改的可能,所以请慎重决定,提交选课结果的时候,务必要填写你的学籍验证码,学籍验证码在你的选课卡右下角涂层,刮开涂层一串4位数字,你的学号和你的验证码必须匹配才能进行完成选课结果的提交。<span
  117. class="ts">不慎遗失选课卡的同学,请到教务处补办。</span>
  118. </p>
  119. <p class="jwc">教务处 <span class="iconfont">&#xe6f2;</span>
  120. <br>
  121. 2020年3月18日
  122. </p>
  123. </div>
  124. <section class="main">
  125. <div class="item"><input type="checkbox" value="kc01" name="xk" id="kc01" class="xk" form="stu_user"
  126. checked><label for="kc01"> <span class="iconfont">&#xe6d0;</span> 公共关系</label></div>
  127. <div class="item"><input type="checkbox" value="kc02" name="xk" id="kc02" class="xk" form="stu_user"><label
  128. for="kc02"></label>
  129. <span class="iconfont">&#xe6d0;</span> 社会经济</label> </div>
  130. <div class="item"><input type="checkbox" value="kc03" name="xk" id="kc03" class="xk" form="stu_user"><label
  131. for="kc03">
  132. <span class="iconfont">&#xe6d0;</span> 政治经济</label></div>
  133. <div class="item"><input type="checkbox" value="kc04" name="xk" id="kc04" class="xk" form="stu_user"><label
  134. for="kc04">
  135. <span class="iconfont">&#xe6d0;</span> 市场营销</label></div>
  136. <span class="item"><input type="checkbox" value="kc05" name="xk" id="kc05" class="xk" form="stu_user"><label
  137. for="kc05">
  138. <span class="iconfont">&#xe6d0;</span> 国际贸易</label></span>
  139. <span class="item"><input type="checkbox" value="kc06" name="xk" id="kc06" class="xk" form="stu_user"><label
  140. for="kc06">
  141. <span class="iconfont">&#xe6d0;</span> 企业管理</label></span>
  142. <span class="item"><input type="checkbox" value="kc07" name="xk" id="kc07" class="xk" form="stu_user"><label
  143. for="kc07">
  144. <span class="iconfont">&#xe6d0;</span> 中国税法</label></span>
  145. <span class="item"><input type="checkbox" value="kc08" name="xk" id="kc08" class="xk" form="stu_user"><label
  146. for="kc08">
  147. <span class="iconfont">&#xe6d0;</span> 会计基础</label></span>
  148. </section>
  149. </body>
  150. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议