CSS课程总结 ｜ 青训营笔记

是阿宇啊
90 阅读3分钟

CSS课程总结 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第二天

[TOC]

CSS是什么

​ CSS : Cascading Style Sheets(层叠样式表)

CSS的基础结构

/*这就是一条CSS语句*/
h1 {
    color:white;
    font-size:14px;
}
字段含义
h1选择器(Selector)
color属性(Property)
white属性值(Value)
font-size:14px;声明(Declaration)

CSS的选择器

		（1）常用选择器
		①元素选择器
                作用：根据标签名来选中指定的元素
                语法：标签名{}
                例子：p{}  h1{}  div{}
		②id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子：#box{} #red{} 
        ③类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值
         ④通配选择器
				作用：选中页面中的所有元素
	            语法: *
	      ⑤属性选择器
                [属性名] 选择含有指定属性的元素
                [属性名=属性值] 选择含有指定属性和属性值的元素
                [属性名^=属性值] 选择属性值以指定值开头的元素
                [属性名$=属性值] 选择属性值以指定值结尾的元素
                [属性名*=属性值] 选择属性值中含有某值的元素的元素
		（2）伪类选择器
		- 伪类用来描述一个元素的特殊状态
                比如：第一个子元素、被点击的元素、鼠标移入的元素...
            - 伪类一般情况下都是使用:开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
            -a元素的伪类
            a元素的伪类
                :link 用来表示没访问过的链接（正常的链接）      
				:visited 用来表示访问过的链接
				由于隐私的原因，所以visited这个伪类只能修改链接的颜色
				:hover 用来表示鼠标移入的状态
				:active 用来表示鼠标点击
		（3）组合选择器
			①子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
            ②后代元素选择器：
                作用：选中指定元素内的指定后代元素
                语法：祖先 后代
            ③兄弟元素选择器
                选择下一个兄弟
                语法：前一个 + 下一个

CSS可以写入的位置

  • 嵌入

  • 内联

  • 外链

CSS工作的基本原理

image.png

颜色的表示

  1. RGB三原色调控

​ rbg(0,0,0) 或 #000000

  1. HSL
  • Hue 色相(H)：色彩的基本属性
  • Saturation 饱和度(S)：色彩的鲜艳程度
  • Lightness 亮度(L) ：颜色明亮程度

  1. alpha 透明度

    1为不透明 0为透明

CSS盒子模型

	CSS将页面中的所有元素都设置为了一个矩形的盒子
    每一个盒子都由一下几个部分组成：
    内容区（content）
    内边距（padding）
    边框（border）
    外边距（margin）
    内容区（content），元素中的所有的子元素和文本内容都在内容区中排列  
        内容区的大小由width 和 height两个属性来设置
            width 设置内容区的宽度
            height 设置内容区的高度

CSS字体相关的属性

	字体相关的样式 
            color 用来设置字体颜色
            font-size 字体的大小
            line height 设置行高
            font-weight 字重 字体的加粗 
            font-style 字体的风格
            	normal 正常的
            	italic 斜体
            text-align 文本的水平对齐
                 left 左侧对齐
                 right 右对齐
                 center 居中对齐
                 justify 两端对齐

Flex

	-是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
    -flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
    	display:flex  设置为块级弹性容器

学习CSS的几点建议

  • 充分利用 MDN 和 W3C CSS 规范
  • 保持好奇心，善用浏览器开发者工具
  • 保持学习
avatar
文章
阅读
粉丝