这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

CSS学习|青训营笔记

1、css是什么？

- Cascading Style Sheets
- 用来定义页面元素的样式
- -设置字体和颜色
- -设置位置和大小
- -添加动画效果

2、选择器Selector

-找出页面中的元素，以便给他们设置样式
-使用多种方式选择元素
--按照标签名、类名或id
--按照属性
--按照DOM树中的位置

2.1通配选择器

2.2标签选择器

2.3id选择器

2.4类选择器

2.5属性选择器

3、伪类

-不基于标签和属性定位元素
-几种伪类
--状态伪类
--结构性伪类

4、颜色-HSL

-Hue色相（H）是色彩的基本属性，如红色、黄色等，取值范围是0-360
-Saturation饱和度（S）是指色彩的鲜艳程度、越高约鲜艳，取值范围0-100%
-Lightness亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%

5、font-size

-关键字 --small、medium、large -长度 --px、em -百分数 --相对于父元素字体大小

调试CSS

-右键点击页面，选择【检查】 -使用 快捷键 --ctrl+shift+(Windows) --cmd+Opt(Mac)

总结：

css是设置结点样式，通过选择不同的结点，不同的布局方式。字体、颜色等形成样式。最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样。利用**媒体查询**可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。