这是我参与「第四届青训营 」笔记创作活动的的第2天
了解CSS
css是什么？
用来定义页面元素的样式，通俗的来讲html是一个人的骨架结构，那么css就是一个人穿的衣服，主要是起一个美化的作用。
css的用法
语法：选择器{ 样式属性； }
css的运用方法
1.外链式
使用样式：在head标签下写入 <link rel="stylesheet" href="css的文件位置">
2.嵌入式
同样在head标签下写入<style></style>在style标签中添加css
3.内联式
在对应的标签下写入style
例如<p style=''>111</p>
css选择器
目标：找出页面的元素，以便于给他们设置样式 分类：
1.通配选择器
*{ margin：0； padding：0; }
通配符通常在清除文本默认样式时使用，应用在全局
2.标签选择器
标签选择器就是将对应的选择器选中，放在style标签下
3.id选择器
语法：
#id名{属性：属性1}
id选择器的使用：样式#定义，结构id调用，只能调用一次，别人切勿使用
4.类选择器
目标：类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用 该选择器可以单独使用，也可以与其他元素结合使用。
<div class="类名"><div> 在书写时属性类名前加.
5.属性选择器
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
深入css
网页布局方式：标准流布局，float，定位
设置定位方式
1.属性名：position
2.常见属性值
设置光标形状
使用cursor
属性有 text：工字形，可以选择文字
default：默认值，通常为箭头
pointer：小手效果，提示用户可以点击
move：十字效果，提升用户可以移动
圆角边框
使用border-radius
//一个值是指四个角都相同
//4值 ：左上 右上 右下 左下 从左上顺时针旋转一圈
//3值。。。。
单位为：px
画一个正圆：
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半 ---border-radius：50%
胶囊按钮：
1.盒子要求是长方形
2.设置---border-radius:盒子高度的一半
溢出部分效果
1.属性名：overflow
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条
显示隐藏
1.元素本身隐藏：让元素本身在屏幕不可见，如：hover
visibility：hidden(工作中不常用)
display:none
背景图缩放
background-size :px，百分比，contain（与盒子尺寸相同，导致有留白），
background 练写拓展
background:color image repeat(平铺) position/size
盒子阴影
属性名：box-shadow
参数 作用
h-shadow 必须，水平偏移量，允许负值
b-shadow 必须，垂直偏移量，允许负值
blur 可选，模糊度
spread 可选，阴影扩大
color 可选，阴影颜色
inset 可选，将阴影改为内部阴影
过渡
属性名：transition（配合hover使用）
常见取值：
参数 取值
过度的属性 all：所有能过度的属性都能过渡其属性名为：width
过渡的时长 数字+s （秒）
骨架结构
文档类型声明，告诉浏览器该网页的HTML版本
</!doctype>
标识网页使用的语言作用：抖索引擎归类+浏览器翻译
常见语言：zh-cn中文
标识网页使用的字符编码
1.utf-8为万国码，收录了全球语言的文字
2.gb2312:6000+汉字
3.gbk:20000+汉字
SEO三大标签
SEO：搜索引擎优化
作用：优化引擎排名
内容：1title:网页标题标签
2,description:网页描述标签
3.keywords:网页关键词标签
favicon-标题图标
场景：显示在标签页标题左侧的图标，通常为.ico
link:favicon
显示模式
display：grid使元素生成一个块级的grid容器，使用grid-template相关属性将容器划分为网格
学css心得
1.充分利用网络资源，如MDN
2.保持好奇心，在别人网站上看到好看的样式，自己也可以试着实现一下效果
3.持续学习
4.调css时要有耐心
