前端学习 20220825

前端学习20220825

select下拉表单元素

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

• select中至少包含一对option
• 在option中写selected="selected"实现默认选中状态

textarea文本域元素

<!--rows控制行数，cols控制字符-->
<!--实际开发中使用CSS控制文本域宽度高度-->
<textarea rows="3" cols="20">
    默认占位文字
</textarea>

CSS代码风格

1. 样式格式书写

• 紧凑格式

h3 { color: deeppink; font-size: 20px;}

• 展开格式(==推荐==，更直观)

h3 {
    color: pink;
    font-size: 20px;
}

1. 样式大小写 一般情况使用小写字母，特殊情况除外
2. 空格规范

• 冒号后保留空格
• 选择器和大括号间保留空格

CSS选择器的作用

根据不同需求选择不同的标签

选择器分类：

基础选择器(由单个选择器组成)

标签选择器(标签名)：快速为页面中同类型的标签统一设置样式，不能设计差异化样式

类选择器(.类名)：

• 为页面中某一个或某几个标签统一设置样式，==长名称或词组使用横线来为选择器命名==
• 多类名：
  • 使用方式：多类名间要使用空格隔开
  • 使用场景：相同样式放在同一个类里面方便修改

id选择器(#id)：为特定id的HTML元素指定特定样式，==只能调用一次==

==通配符选择器==(*)：选取页面中所有元素，不需要调用

使用场景：

/* 清除所有元素标签的内外边距*/
* {
    margin: 0;
    padding: 0;
}

复合选择器

文字属性

字体系列(font-family)

• 各种字体之间使用英文逗号隔开
• 如果字体是多个单词由空格隔开，需要加引号
• 尽量使用系统默认自带字体，保证在各种浏览器中都能正确显示
• 渲染时从前往后逐个查找系统是否安装该字体

字体大小(font-size)

• px是最常用的单位
• 谷歌默认16px
• 不同浏览器默认字号大小不一致，尽量给一个明确值
• 标题标签比较特殊，需要单独指定大小

字体粗细(font-weight)

• normal：默认值400
• bold：粗体，相当于700，也相当于b对象的作用
• bolder：IE5+，特粗体
• lighter：IE5+，细体
• number：IE5+，100|200|300|400|500|600|700|800|900

字体样式(font-style)

• normal：默认值
• italic：斜体
• 平时很少给文字加斜体，反而要给斜体标签(em, i)改为不倾斜字体

字体复合属性(font)

body {
    /* 不能随意颠倒顺序 */
    /* font-size, font-family 必须写 */
    font: font-style font-weight font-size/line-height font-family;
}