网站导航
> 文档中心 > CSS基础

CSS基础

网友: 文档中心 2022-05-10 15:52:28

文章目录

  • 1.CSS引入方式
  • 2.基础选择方式
    • 2.1 标签选择器
    • 2.2 类选择器
    • 2.3 id选择器
    • 2.4 通配符选择器
  • 3. 字体和文本样式
    • 3.1 字体大小
    • 3.2 字体系列 font-family
    • 3.3 样式层叠问题
    • 3.4 font相关属性连写
    • 3.5 文本缩进
    • 3.6 文本水平对齐
    • 3.7 文本修饰
    • 3.8 行高
  • 综合案例

1.CSS引入方式

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

2.基础选择方式

2.1 标签选择器

  • 结构： 标签名 {CSS属性名 : 属性值 ;}
  • 作用 ：通过标签名找到页面中所有这类标签，设置样式
  • 注意点：
    1. 标签选择器选择的是一类标签，而不是单独某一个
    2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2 类选择器

  • 结构：.类名{CSS属性名：属性值;}
  • 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
  • 注意点：
    1. 所有标签上都有class属性，class属性的属性值称为类名
    2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
    3. 一个标签可以同时有多个类名，类名之间以空格隔开
    4. 类名可以重复，一个类选择器可以同时选中多个标签

2.3 id选择器

  • 结构：#id属性值 {CSS属性名：属性值；}
  • 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
  • 注意点：
    1. 所有标签都有id属性
    2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
    3. 一个标签上只能有一个id属性值
    4. 一个id选择器只能选中一个标签

2.4 通配符选择器

  • 结构：*{CSS属性名：属性值；}
  • 作用：找到页面中所有的标签，设置样式
  • 注意点：
    1. 开发中使用少，只会在极特殊情况下才会用到
    2. 在小页面中可能会用于去除标签默认的margin和padding

3. 字体和文本样式

3.1 字体大小

属性 属性名 取值 注意点
字体大小 font-size 数字+px Google默认大小16px
字体粗细 font-weight 关键字：normal/bold
纯数字：400/700
(100~900整百数)		 不是所有字体都有9种粗细；正常、加粗两种取值使用最多
字体是否倾斜 font-style 正常：normal
倾斜：italic

3.2 字体系列 font-family

  • 属性名： font-family
  • 常见取值： 具体字体1,2,3,4…
    • 具体字体：微软雅黑、黑体、宋体等
    • 字体系列：sans-serif、monospace等
  • 渲染规则：
    1. 从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
    2. 如果都不支持，此时会更具操作系统，显示最后字体系列的默认字体
  • 注意点：
    1. 如果字体名称中存在多个单词，推荐使用引号包裹
    2. 最后一项字体系列不需要引号包裹
    3. 网页开发时，尽量使用系统常见自带字体，保证不同用户留恋网页都可以正确显示
<title>Document</title>    <style> p{     font-size: 30px;     /* 加粗 */     font-weight: 700; } h1{     /* 变细 */     font-weight: 400; } div{     /* 倾斜 */     font-style: italic; } em{     /* 正常 */     font-style: normal; } h1{     /* 如果用户没有安装楷体,就按微软雅黑显示 */     /* 如果用户没有安装微软雅黑,就按任意一种sans-serif显示 */     font-family: 楷体,微软雅黑,sans-serif; }    </style></head><body>        <p>段落文字</p>    <h1>这是一级标题</h1>    <div>div文字</div>    <em>em</em>    </body>

3.3 样式层叠问题

  • 如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
  • CSS(Cascading style sheets) ——层叠样式表
  • 所谓层叠即叠加的意思,表示样式可以一层一层的层叠覆盖

3.4 font相关属性连写

  • 属性名：font(复合属性)
  • 取值： font : style weight size family;
  • 省略要求： 只能省略前两个,如果省略了相当于设置了默认值
  • 注意点： 如果需要同时设置单独和连写形式
    • 要么把单独的样式写在连写的下面
    • 要么把单独的样式写在连写的里面

3.5 文本缩进

  • 属性名： text-indent
  • 取值：
    • 数字 + px
    • 数字 + em (推荐：1 em = 当前标签的font-size的大小)

3.6 文本水平对齐

  • 属性名：text-align
  • 属性值： left——左对齐，center——居中对齐，right——右对齐
  • text-align:center能让哪些元素水平居中：
    1. 文本
    2. span标签、a标签
    3. input标签、img标签
  • 注意点： 如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

3.7 文本修饰

  • 属性名：
  • 取值：
属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
  • 注意点： 开发中会使用text-decoration:none;清楚a标签默认的下划线

3.8 行高

  • **作用：**控制一行的上下行间距
  • 属性名： line-height
  • 取值：
    • 数字 + px
    • 倍数（当前标签font-size的倍数）
  • 应用：
    • 让单行文本垂直居中可以设置 line-height：文字父元素高度
    • 网页精准布局时，会设置line-height：1 可以取消上下间距
  • 行高与font连写的注意点：
    • 如果同时设置了行高和font连写，注意覆盖问题
    • font：style weight size/line-height family;

综合案例

网络标签：

相关问题