CSS基础1

该随笔为pink老师前端入门教程的笔记

简介

CSS为层叠样式表（Cascading Style Sheets）的简称，是一种标记语言；主要用于设置HTML页面的文本内容（字体、大小、对齐方式）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS由两个主要部分构成：选择器及一条或多条声明

h1 {
    color: red;
    font-size: 25px;
}
/*选择器 { 样式 }*/
  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体的大小、文本颜色等

CSS基础选择器

作用：选择标签

分类：基础选择器、复合选择器

基础选择器

基础选择器：由单个选择器组成；包括标签选择器、类选择器、id选择器和通配符选择器

  • 标签选择器：按标签名进行选择，为页面中某一类标签指定统一的CSS样式。

  • 类选择器：指定某一个或多个标签的CSS样式，选择器名：.类名。结构需要用到class属性来调用class类。（类名可使用-，不能用纯数字、中文）

    可以给一个标签指定多个类名，类名间用空格隔开：

    <div class="red font20">多个类</div>

  • id选择器：为标有特定id的HTML元素指定特定的样式。

    HTML元素以id元素来设置id选择器，CSS中id选择以"#"来定义；一个id只能用一次。

  • 通配符选择器：CSS中使用"*"，表示选取页面中所有元素（标签）；不需要调用，只在特定场景下使用。

CSS属性

字体

  • font-family：属性定义文本字体，可设置多个字体（备用）

  • font-size:属性设置字体大小，单位为px

  • font-weight：字体粗细（normal；bold；bolder；100~900）

    属性值 描述
    normal 默认值(不加粗的)，相当于number=400
    bold 定义粗体(加粗的)，相当于number=700
    bolder 定义特粗体
    100-900 400等同于 normal，700等同于 bold，注意这个数字后面不跟单位

    在实际开发中更喜欢用数字表示粗细

  • font-style：文字样式

    属性值 作用
    normal 默认值，浏览器会显示标准的字体样式
    italic 浏览器会显示斜体的字体样式

    平时很少给文字加斜体，反而要将斜体标签( em , i )改为不倾斜字体

  • 字体属性复合写法：

    <style>
div{
    font-style:italic;
    font-weight:700;
    font-size:16px;
    font-family:'Microsoft yahe';
    /*复合属性：简写的方式*/
    /*font简写形式 font: font-style font-weight font-size/line-height font-family  必须保留font size和fontfamily*/
    font:italic 700 16px/28px 'Microsoft yahe';
}
</style>

    • 顺序：样式 粗细 大小 字体

    • 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

    • 不需要设置的属性可以省略(取默认值)，但必须保留font-size 和font-family属性，否则 font 属性将不起作用

文本

CSS 文本属性可以设置文本的 外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等

  • color定义文本颜色

    表示 属性值
    预定义的颜色值 red，green，blue，pink等
    十六进制 #FF0000, #FF6600，#29D794（实际开发中最常用的是十六进制。）
    RGB代码 rgb（255，0，0） 或rgb(100%，0%，0%)

  • text-align：文本对齐方式

    属性值 解释
    left 左对齐（默认）
    right 右对齐
    center 居中对齐

  • text-decoration：装饰文本，可添加下划线，删除线等

    属性值 描述
    none 默认。没有装饰线(最常用)
    underline 下划线，链接自带下划线（常用）
    overline 上划线(几乎不用)
    line-through 删除线 (不常用)

    重点记住如何添加下划线，如何删除下划线

  • text-indent：指定文本第一行缩进，通常是将段落的首行缩进

    • 如果当前元素没有设置大小，则会按照父元素的一个文字大小
    • 单位为px或em，em为一个相对单位，是当前元素（font-size）1个文字大小
    • 可为负数

  • line-height：设置行的高度，可以控制文字的高度

垂直居中的技巧

行高等于盒子的高度（line-height==hight）

行间距包括上间距、文本高度、下间距。这样设置行高的上空隙与下空隙把文本挤到中间。

如果行高小于盒子高度，文本偏上；行高大于盒子高度，文本偏下。

CSS的引入方式

按照CSS样式书写的位置，CSS样式表可以分为三大类：

  1. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

内部样式表

写到html页面内部，将所有的CSS代码抽取出来，单独放到一个<style>标签中。

  • 理论上<style>标签可以放在HTML文档的任意地方，但一般会放在文档的<head>标签中

  • 通过这种方式，可以控制整个页面的元素样式

  • 常在练习时使用

行内样式表

在元素标签内部的style属性设定CSS样式，适合修改简单样式。

<div style="color:red; font-size:12px;">
    内容
</div>
  • 在双引号中间，写法要符合CSS规范
  • 可以控制当前标签

外部样式表

样式单独写到CSS文件中，后把CSS文件引入HTML页面中使用

  1. 新建CSS文件，把所有CSS代码放入此文件
  2. 在HTML页面中，使用<link>标签引入文件

<link rel="stylesheet" href="css文件路径">

posted @ 2021-09-07 16:01  艾雅雅雅  阅读(60)  评论(0)    收藏  举报