HTML基础学习02_CSS基础属性

内容概述

一 、 文本属性

1.text-decoration

设置文本的修饰外观 （下划线、上划线、 贯穿性 、删除线 或者 闪烁

• None 无装饰线 可去除 a 默认下划线

• Underline ： 下划线

• overline:上划线

• Line-through 中划线

• letter-spacing: 10px; 字母间的间距

• word-spacing: 10px;单词间的间距

2.text-transform 大小写转换

• capitalize 首字符大写

• uppercase 所有字符转换成大写

• Lowercase 所有字符转换成小写

• none 阻止所有字符的大小写被转换

3. text-indent 首行缩进

4.text-align 文本对齐方式

• left 左对齐

• right 右对齐

• center 居中对齐

• justify 最后一行没有效果 文字向两侧对齐，对最后一行无效

• justify-all 和justify一致，但是强制使最后一行两端对齐

5. font-size 设置字体大小

/* ，绝对大小值 */
 font-size: xx-small;
 font-size: x-small;
 font-size: small;
 font-size: medium;
 font-size: large;
 font-size: x-large;
 font-size: xx-large;
 
 
/* ，相对大小值 */
 font-size: larger;
 font-size: smaller;
 
 
/* ，长度值 */
 font-size: 12px;
 font-size: 0.8em;
 
 
/* ，百分比值 */
 font-size: 80%;
 
 
font-size: inherit;

6. font-family 设置字体 Font-weight 文本粗细

Font-weight :字体的粗细程度 一些字体只提供 normal 和 bold 两种值 也可跟 数字 默认 400

注意 ： font-weight: 700; 后面不可跟px

• normal

  正常粗细。与400等值

• bold 加粗。 与700等值。

• font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200

7. font-style

• italic 斜体 （前提是： font-family 支持文字倾斜）

• oblique 斜体 （让文字倾斜）

8.font-variant 所有小写字母变大写字母 按小写字母显示

• normal 默认值。浏览器会显示一个标准的字体

• small-caps 小型大写字母的字体

• inherit 规定应该从父元素继承 font-variant 属性的值。

[图片上传失败...(image-4ebd26-1641522383945)]

9.line-height 行高

10 字体的缩写

font-style : font-variant: 字体变化 font-weight: 字体粗细 font-size:/ line-height: font-family:

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

简写的时候需要注意：

• 必须包含以下值： font-size font-family

• 可以选择性包含以下值： font-styley font-variant font-weight line-height

• font-style，font-variant，font-weight 必须在font-sitze之前

• line-height必须在font-size后 用/ 分割 eg 16px/30

• Font-fimily必须最后指定

  /* font: 40px/2 "Fira Sans", serif; */

  /* font: italic 1.2em "Fira Sans", serif; */

  /* font: oblique small-caps 40px/60px serif; */

  /* font: 24px sans-serif; */

三 、 选择器

• 通配选择器 *

• 元素选择器

• 类元素选择器

• ID选择器

• 属性选择器

  按照给定的属性，选择所有匹配的元素。 语法：[attr] 只要有attr属性

  [attr=value]

  [attr~=value]

  [attr|=value] 恰好等于 value 或者以 单词value 开头 后紧跟连字符 -

  [attr^=value] 以 value开头

  [attr$=value] 以value 结尾

  [attr*=value] 包含value 例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么

• 后代选择器 ： （空格）组合器选择前一个元素的后代节点。

  /* 选中div 底下的span 包括直接和间接 */

  div span{

  color: red;

  }

• 子选择器 ： > 组合器选择前一个元素的直接子代的节点

  div > span{

  color: red;

  }

• 邻兄弟选择器 ：+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

  /* div 紧挨着的p */

  div + p{

  color: red;

  }

• 全兄弟选择器 ：~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

  /* div 全兄弟选择器 p */

  div ~ p{

  color: red;

  }

• 交集选择器 :同时符合两个

  /* div 和 class 为.one */

  div.one{

  color: red;

  }

• 并集选择器 ：

  , 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
   语法：A, B

• 伪选择器

  伪类

  : 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。 例子：a:visited 匹配所有曾被访问过的 `` 元素。

  伪元素

  :: 伪选择器用于表示无法用 HTML 语义表达的实体。 例子：p::first-line 匹配所有 `` 元素的第一行。

 
 
 
 
 
 
 
 
 
 文字内容1
 
 文字内容2
 
 文字内容3
 

 文字内容4
 
 
 
 
文字内容5
 
文字内容6
 内容8
 
 文字内容7
 
 
内容9
 
 

四、 伪类 （pseudo-class） 和伪元素

1. 常见的伪类

• 动态伪类 ： 顺序有要求

  使用时特别注意： ：hover 必须放在 ：link 和：visited后面才能完全生效

  ：active必须放在 ： hover后面才能完全生效

  女朋友看到 LV后 haha 大笑

  女朋友看到LV后 疯（：focus)了样的哈哈大笑

  • ：link a:link 未访问的状态

  • :visited a:visited 已访问的状态

  • :hover 鼠标放 在链接上的颜色 （也可放在别的元素上）

    strong:hover{

    }

  • :active 激活的链接（鼠标在链接上长按住未松开）

  • :focus 获取焦点

    去掉a元素的焦点状态

    a:focus{

    outline: none;

    }

    tabindex 可以调整tab选中元素的顺序

    动态伪类eg:

  
   
   
   
   
   
   
   
   
  
   
    百度一下
   
   

• 目标伪类： ：taget

  目标伪类：target eg

  
   
   
   
   
   
   
   
   
   
   标题1
   标题2
   标题3
   

 
标题1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1
 
我是内容1

 
标题2
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222
 
我是内容222



 
标题3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3
 
我是内容3

• 语言伪类： ：lang()

• 元素状态伪类: :disabled

  Eg：

  
   
   
   
   
   
   
   
   
  
   
   
  
   我是按钮
   我是按钮
   
  
   

• 结构伪类

  • :nth-child(1) 选中第几个子类

  
   
   
   
   
   
   
   
   
   
   
  
   
   
  文字内容1
   
  文字内容2
   
  文字内容3
   
  文字内容4
   
  文字内容5
   
  文字内容6
   
  文字内容7
   
  文字内容8
   
  文字内容9
   
   
  
   

•  /* 父元素中唯一子元素 */
   span:only-child{
   color: red;
   }

   /* 是父元素中唯一的这种类型的子元素 */
   :only-of-type{
   color: red;
   }

   /* 元素为空 */
   :empty{
   height: 20px;
   columns: red;
   }

   /* 否定伪类 除啦html 除啦body 除啦div之外的所有元素*/
   :not(html):not(body):not(div){
   color: red;
   }
   

• 常见的伪元素

  • :first-letter 第一个字母

   p::first-letter{
   font-size: 50px;
   }

  • 第一行
     p::first-line{
     font-size: 50px;
     }

  • ：:before 在某元素前加内容

  • ：：after 在后边加元素

     span::before{
     content: "1323";
     color: red;
     }

五、 Emment元素

• div#title id属性 #

• div.box 类 .

• 上一级 ^ div#main>div.box+p.p1+span.title^div.footer>span

• 属性内容带数字 {内容}*5

• css隐式

• 隐式写法 eg

   lv可以不写 一样的效果
   li>lv.item}*5
   .container 会自动补齐 div