2020 8 25 笔记整理

CSS基本概念：

CSS（Cascading Style Sheet） 层叠样式表

一、选择器

元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}

通配选择器
作用：选中页面中的所有元素
语法: * {} 

1.行内样式（内嵌样式）:

<h1 style="color: blue;">绝句</h1>

直接写在标签里，使用style属性，只对当前标签有效，
页面内容和表现形式是高度耦合的，不利于分工合作

2.内联样式：

<style>
    p{
        font-size: 24px;
    }
</style>

内部样式是在head部分使用<style>标签，样式对当前页面有效，
内容和表现形式实现了一定程度的分离，但不彻底。

3.外部样式（外联样式）：

#text1{
    color: pink;
}
.text2{
    text-align: left;
}

	
<link rel="stylesheet" href="css/css01.css">

外部样式样式需要一个link标签与html连接起来，内容与表现形式完全分离
而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现

三、字体相关属性

1.text-algin（对齐方式）:center/left/right
2.font-size（字体大小）:56px/xxpx
3.font-family（字体体系）:”黑体”/”幼圆”
4.font-style（是否倾斜）:italic（斜体）
  inherit（从父元素继承字体样式）normal（正常）oblique(倾斜)
5.font-weight（字体粗细）:100/200/
   normal (400) /bold (700) /bolder
6.font-variant（是否大写）:normal/small-caps（小型大写）
7.color（字体颜色）:blue/red/pink/#FFFFFF/#F6F6F6
8.text-decoration:none（默认格式，无）/underline（下划线）
        overline（上划线）   /line-through（删除线）
9.direction（文本方向）:ltr（left to right、从左往右）
        rtl（right to left、从右往左）
10.text-transform:none（默认）/capitalize（首字母大写 
       uppercase（全部大写）/lowercase（全部小写）
11.line-height（行高）:normal/xx_px
12.letter-spacing（字符间距）;2px/xx_px