HTML与CSS学习第3天

HTML与CSS学习第3天

目录

• HTML与CSS学习第3天
• • 1.CSS
  • • 1.1 css介绍
    • 1.2 css语法
    • 1.3 css引入方式
  • 2. 选择器
  • • 2.1选择器作用
    • 2.2 常见的选择器
    • • **注意点**
    • 2.3 选择器示例
  • 3. 字体和文本样式
  • • 3.1字体相关属性
    • 3.2 字体的一些注意点
    • 3.3 文本样式
    • 3.4 文本样式注意点
    • 3.5 水平居中方法总结
    • 3.6 行高
  • 4. chorm调试工具
  • 5. 颜色常见取值

1.CSS

1.1 css介绍

• css：层叠样式表
• 作用：给HTML页面设置样式

1.2 css语法

• 写法：写在style标签中，style标签写在head标签里，title标签下

• 语法：选择器{

  ​ 属性键值对；

  }

• 示例

	<style>
        /* h1标签这里为选择器 */
        h1
        {
            /* color为文字颜色属性 */
            color: dodgerblue;
            /* font-size为字体大小 */
            font-size: 40px;
            /* background-color为标签范围背景颜色 */
            background-color: blueviolet;
            /* width，height为标签范围s宽度和高度 */
            width: 1000px;
            height: 400px;            
        }
        
    </style>

• 常见属性

属性名	作用
color	文字颜色
font-size	文字大小
background-color	背景颜色
width	宽度
height	高度

• 注意点：每一个样式键值对写完后以分号结尾。

1.3 css引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	写在style标签中，前文提到的方式	当前页面	小案例
外联式	写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签	配合js使用

• 内嵌式示例：

<!-- 内嵌式 -->
     <style>
        p{
            color: red;
        }
    </style> 

• 外联式示例：

<link rel="stylesheet" href="02.css">   rel属性代表地址文件为样式表
<!--书写的位置与内嵌式相同 -->

• 行内式示例：

<!-- 行内式 -->
<p style="color: red;">我是大傻逼</p>

2. 选择器

2.1选择器作用

选中页面对于的标签，方便后续设置样式

2.2 常见的选择器

选择器名	语法规则	作用
标签选择器	标签名{css属性名:属性值;}	通过标签名，找到页面中所有这类标签，设置样式
类选择器	.类名{css属性名:属性值;}	通过类名，找到页面中所有带有这个类名的标签，设置样式
id选择器	#id属性值{css属性名:属性值;}	通过id属性值，找到页面中所有带有这个id属性值的标签，设置样式
通配符选择器	*{css属性名:属性值;}	找到页面中的所有标签，设置样式

注意点

• 类名以数字，字母，下划线，中划线组成，但不能以数字或中划线开头
• 一个标签可有多个类名，类名之间以空格隔开
• 类名可以重复（即多个标签可以有相同类名）
• id属性值在一个页面中是唯一的
• 1个标签上只可以有一个id属性值
• 1个id选择器只能选中一个标签
• 除非有特殊情况，否则不要使用id设置样式

2.3 选择器示例

• 标签选择器

div
{
    font-family: 'Courier New', Courier, monospace;
}

• 类选择器

.a3
{
    color: blueviolet;
}

• id选择器

#a1
{
    color: brown;
}

#a2
{
    color: blue;
}

• 通配符选择器

<style>
        *
        {
            color: #101010;
        }
    
</style>

3. 字体和文本样式

3.1字体相关属性

属性名	属性值	描述
font-size	数字+px	字体大小，谷歌默认字体大小为16px
font-weight	normal或400 或者 bold 或700，还可取100-900的值，但字体不一定有9种粗细。	400和normal为正常，700或bold为加粗
font-style	normal或italic	normal为正常，italic为倾斜
font-family	具体字体名1,具体字体名2,…字体系列	从左往右找字体，已经安装就应用该字体
font	style weight size family	字体属性值连写，swsf，代表上述四个属性

3.2 字体的一些注意点

• 字体系列

  字体系列	特点
  无衬线字体	横平竖直
  衬线字体	横细竖粗，首尾有笔锋
  等宽字体	每个字母或文字宽度相同

• 默认字体

  系统	字体
  windows	微软雅黑
  mac os	苹方

• font属性连写

  • 只能省略前两个属性
  • 省略了相当于设置了默认值

3.3 文本样式

样式	属性名	属性值
文本缩进	text-indent	数字+px或数字+em（em为当前标签的font-size大小）
文本水平对齐方式	text-align	left（左对齐）/center（居中对齐）/right（右对齐）
文本修饰	text-decoration	underline（下划线）/none（无装饰）

3.4 文本样式注意点

• text-align:center 能让哪些元素水平居中

  • 文本
  • span标签，a标签
  • input标签，img标签

• 如果要让以上元素水平居中，text-align:center需要给以上元素的父元素设置。

3.5 水平居中方法总结

• 实现div，p，h（大盒子）水平居中
  • 通过设置样式margin:0 auto;实现
• 注意点
  • 直接给当前元素设置即可
  • margin:0 auto;一般针对于固定宽度的盒子，如果合子没有设置宽度，此时会默认占满父元素的宽度

3.6 行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：1.数字+px，2.倍数（当前标签font-size的倍数）
• 让单行文本垂直居中对齐
  • 设置line-height:文字父元素高度
• 取消上下间距
  • line-height：1

• 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4. chorm调试工具

• 图解

5. 颜色常见取值

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red，green，blue
rgb表示法	红绿蓝三原色，每项取值范围0-255	rgb(0,0,0),rgb(255,255,0),…
rgba表示法	红绿蓝三原色加上透明度a，a取值范围0-1	rgba(255,255,255,0.5),rgba(255,255,0,0.3)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#e92322，缩写：#000，#f00