Day 2 CSS

滤镜小项目

img的transition属性
- 设置鼠标移动的过度时间
img：hover选择器
- 可以设置鼠标悬浮时会做什么动作
  - 例如设置webkit-filter为none，鼠标移动到图片时，则恢复正常
img的-webkit-filter属性
- grayscale()：设置灰度，1是百分比，0是无效果
- brightness()：设置亮度，默认值1无效果，数字越大曝光越强
- sepia()：设置褐色程度，老照片的感觉，0为无效果，1为百分比褐色
- blur(npx)：设置模糊度，0无效果，n越大越模糊，即将多少像素融为一个
- contrast()：设置对比度，1为无效，0为无对比度，越大对比度越高
- saturate()：设置饱和度，1为无效，0为无饱和度，越大饱和度越高，颜色越饱满
- invert()：设置色相反向，胶片底色效果
- hue-rotate（ndeg）：设置色相旋转，n为角度

这些属性是可以互相作用的，例如要实现一点点画出来的效果，可以将多个属性拼接并用空格隔开

使用GitHub上传代码并声称网络链接

通过生成GitHub链接，用于方便展示自己写的页面

上传好文件后，生成链接路径：setting——GitHub Pages——choose a theme——select a theme，然后再到setting页面的GitHub Pages接可以看到生成的链接了

注意要设置为公开，私密的要收费。

lxc9998.github.io/DAY-1/ 然后还可以将网址生成二维码附在简历上。

CSS初识

行块元素

行元素没有宽高，所以需要设置行块元素，才可以色湖之宽高

css三种使用方法

内联：写在标签里
- 在浏览器中的style最上级element.style
外联：写在head中的style标签里
文档：写在专门的css文件中，并在HTML中引入

css使用方法和重叠样式表的关系

表示浏览器展示的优先级：内联》外联和文档。而外联和文档的优先级，看哪个HTML中的行数/写得更靠前，优先级就越高
其他情况一样，则选择器的优先级id》class》标签样式》浏览器默认样式》继承样式
是有办法提升优先级的
- 直接在属性值的后面加！important
- 设置复杂度，（越具体）复杂度越高，优先级越高
  - #d1{}，复杂度最低
  - body #d1{}，复杂度稍高，表示body下的子元素
  - div#d1，复杂度更高，表示既是div又是id为d1的元素

css选择器

属性选择器
- [属性]{}，选择这个属性的元素
- [属性=属性值]{}，选择特定属性值的元素
子元素选择器
- 选择列表中的第一个
  - li:nth-child(1){}
- 选择列表中的最后一个
  - li:last-child(1){}
- 选择所有子元素
  - body div{}，加空格，会选中所有div的子元素，包括div中的div，sunzi
直接子元素选择器
- div parent div child div sunzi
- 如果只想选择直接子元素，可以使用**>**号
- .parent>div{}
选择某个元素后面一个元素，可以使用**+**号
- .d3+div{}
选择某个元素后面的多个元素，可以使用**~**号
- .d3~div{}

伪元素

伪元素，即假元素，但有和元素很类似。直接通过css来写一个“元素”，因为实际上元素只能是标签如div之类的创建，但是用css伪元素就能实现了

例如微信聊天框右边有个小三角形，聊天框本体是div，但是右边的这个小三角形就不适合再创建一个空的div元素来表示了，这时候就可以使用伪元素。
div.chart：after{}，设置元素后面的元素
- 注1：也可以设置元素前面的元素div.chart：before{}
- 注2：content：“内容”，content属性必须有，否则元素没有东西，如果不想写内容可以用空“”代替
- 伪元素默认是行元素，不占一整行。如果要设置小三角，则要设置行块元素
  - display：inline-block
- 如果不用定位，伪元素的三角还是在文字内容附近，而不是整个文字框的右边。
  - 父元素设置相对定位，position：relative
  - 子元素（伪元素）设置绝对定位：absolute，意即根据父元素移动，然后再添加top和right属性，调整像素移动

浮动

解决三个问题

文字包围图片
解决莫名其妙的间隔问题
设置向左，向右排版问题

float：left

可以设置元素，脱离正常的文档流

学习了弹性布局之后也可以不用浮动了

间隔问题：

<head>

\<style>
    .parent{
        margin: 0 auto;
        width: 300px;
        height: 300px;
        background: lightcyan;
    }
    .child{
        width: 100px;
        height: 100px;
        background: pink;
        display: inline-block;
        float: left;添加浮动即可解决
    }
\</style>

</head>

<body>

\<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
\</div>

</body>

第二天