02前端_css基础

早晨的天太沉,让我透不过气。家里亲人生病,又赶上疫情... 生活总是喜欢来个突袭,让人措手不及,甚至惊慌失措。

晚上的大雨说下就下,哈哈,不如淋个痛快,畅快淋漓。

CSS基础语法

  • css结构

    css使用方法是选择器+声明组成;声明由属性和值组成

    选择器{属性:值;属性:值;}

  • css使用方法

    引入css样式的四种方法

    • 行内样式: 在开始标签内加入style样式属性<p style="color:red">

    • 内部样式 <head>标签间添加<style type="text/css">样式</style>

    • 外部样式 把css样式写到一个单独的文件中命名xxx.css,在<head>标签引入<link>标签 <link rel="stylesheet" href="xxx.css" tyle="text/css"> 页面加载时,同时加载css样式

    • 导入式 @import "xxx.css" @import url(xxx.css) 在读取完html文件之后加载

    • 四种样式的优先级

      • 行内样式>内部样式>外部样式

      • 链接外部样式表和内部样式表的优先级由所在位置的先后决定

      • 最后定义的优先级最高

  • css选择器

    • 标签选择器 p{}...

    • 类选择器 .类名{}

    • id选择器 #id名{}

    • 群组选择器 p,h1,div{}

    • 全局选择器 *{}

    • 后代选择器 div p{}

    • 伪类选择器

      • 链接的四种状态: 未访问状态,已访问状态,悬停状态,激活状态 :link : visited : hover : active

      • 其他元素也可以用的伪类 :hover用于鼠标悬停在某个元素 :active用于元素被激活(鼠标按下未松开状态)

  • css优先级

    • 使用方法优先级:行内样式>内部样式>外部样式

    • 选择器权重值:权重值高的优先使用

      • 标签选择器:权重1

      • id选择器:权重100

      • 类和伪类选择器:权重10

      • 通配符选择器:权重0

      • 行内样式:权重1000

      • !import优先级最高

CSS文本样式

  • 字体样式

    1. 字体格式: font-family:字体1,字体2 如果字体1没有就继续找字体2,如果字体2没有就使用浏览器默认样式

    2. 字体大小: font-size:一般就是用px rem em rem:转换为像素取决于根元素的字体大小即html元素的字体大小 em:转换为像素取决于父元素的字体大小

    3. 字体颜色: color:三种颜色表示方法:颜色名、16进制数、rgb()

  • 文本样式

    1. font-weight:元素内文字设置粗细

    2. font-style:元素内文字设置样式 normal、italic、oblique

    3. font-variant:字体变形;设置元素内文本未小型大写字母 normal、small-caps

    4. font:font-style font-variant font-weight font-size|line-height font-family

    5. text-align:设置元素内文本水平对齐方式 left、center、right、justify(左右对齐)

    6. vertical-align:设置元素内文本垂直对齐方式: baseline、sub、super、top、text-top、middle、bottom、text-bottom、长度、百分比

    1. line-height:设置元素中文本行高

    2. word-spacing:设置元素内单词之间的间距

    3. letter-spacing:设置元素内字母之间的间距

    4. text-transform:设置元素内文本的大小写capitalize、uppercase、lowercase、none

    5. text-decoration:设置元素内文本的装饰underline、overline、line-through、blink、none

原文地址:https://www.cnblogs.com/muzihuan/p/13189674.html