Day 4 (CSS)

1.空格的意义：

• css选择器.s1 .s2｛｝=> 里面的"全部"都被我选择到
• class => 同时有2个或2个以上的class
• css属性的值
  =>border: 空格代表可以把多可属性缩写(style color..)
  =>border: width:

2.虚拟元素 ::after {在元素後面增加}

      #demo::before {
        content: "我是before";
        background-color: orange;
      }

一定要有 content: ""; (就算没有想用的元素,否则抓不到)

        #demo::after {
            content: "";
        }

3.虚拟元素使用方法,如在前面或後面增加1或2

p::after{
}
<div>
   1   
     <p>aaaaa</p>
   2
</div>

after:2
before:1

4.CSS编译器

• 简单选择器 => tagName is class
  https://www.w3schools.com/css/css_selectors.asp
• 後裔/复合/组合选择器 空格 > + , ~
  https://www.w3schools.com/css/css_combinators.asp
• 虚拟(类别or元素)=> : ::
  :(class)
  https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
  ::(element)
  https://www.footmark.info/web-design/css/css-pseudo-element-selectors/
• 属性 =>[] * 包含 ^开头 $结尾
  https://www.w3schools.com/css/css_attribute_selectors.asp

5.变数 => 仓库(apple)= blue,px,rem,50%

< p > color:apple(拿来用)
< div >
< span >

6.root
(1):root 总是 =html
(2)差异:root[虚拟]权重比较大

<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}
</style>

var(--blue)的好处,一次改比较快
参阅
https://www.w3schools.com/css/tryit.asp?filename=trycss3_var
https://ithelp.ithome.com.tw/articles/10228111

7.var的使用方式，如前述
(1)宣告变数(--)是否只能在:root里面宣告?　否。都可以,但会看在哪一阶层里适用,但无意义,因(2)
(2)使用时机?　重复使用CSS同一个"属性的值"时
(3)变数命名是否只能用--a?　"--"都可以 ex:--bee --apple

<style>
      :root {
        /* --为宣告 */
        --a-color: green;
      }
      
      p {
        /* 只有宣告在p里面,所以a不会受影响 */
        --apple: orange;
        color: var(--apple);
      }
      
      a {
        color: var(--a-color);
      }
</style>     

8.透过 calc() 计算出宽度 (不同单位亦可)
计算「一定」要加空格" "+" "

      :root {
        --divWidth: 800px;
      }

      .demo2 {
        /* 可计算 */
        width: calc(var(--divWidth) * 0.5);
      }

使用方法:
var(--变数)
calc(运算)

9.border-radius
变成圆形,增加%无效

      div {
        border-radius: 50%
        }

      div {
        border-radius: 200px 50px 100px 300px;
        }        

• px px =>左上右下 /右上左下
• px px px => 左上 / 右上左下 / 右下
• px px px px =>左上开始 顺时钟

border小工具=====>超级偷懒好用
https://html-css-js.com/css/generator/border-radius/

10.开发工具使用方式(F12)
点左上角的游标图示,选择要看的物件

11.有些属性因缩写有固定格式,不适合简写(如background)

When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position

https://www.w3schools.com/css/css_background_shorthand.asp

        border-style: solid;
        border-width: 1px 5px 10px 15px;
        border-color: red;
        /* 缩写 */
        border: 2px solid red;

12.取得 path 的辅助工具
不知道用在哪内?
https://bennettfeely.com/clippy/

     .demo4 {
        clip-path: polygon(70% 28%, 47% 65%, 23% 38%, 53% 18%, 68% 56%);
      }

13.img与background的差异
预设img(中间)与background(左上)图片起始位置不一样,两者属性一样

    div {
      background-image: url(./img/sunny.jpg);
      background-size: cover;
      /* 背景改变位置的方式 */
      background-position: center;
    }

background比较好用,因为起始就是0px,0px

14.该<标签>是否有此属性:
ex:img
查阅 Attributes
https://www.w3schools.com/tags/tag_img.asp

15.作业遇到的问题集:
CSS可能错误
1.#
=>选错人

2.html的属性设到到css

3.照片很难控制(置中?)
=>照片的display / margin可以左右置中(block)

4.table不知道怎麽置中
=>text-align: center;

5.body有预设margin要重设
=> * {}

6.位置(排版)
=>width height padding margin 都与排版有关
使用border background-color去找原因

7.padding跟margin的差异?
=>元素内部的距离/元素与元素的距离(外)
(档案calc()/background-clip/padding-margin)

8.背景图设定cover後也无法覆盖网页
=> < body >设置

9.文字方块< textarea >怎麽设定固定宽度&高度随内容调整
=>style="resize: none"

10.显示方式对,但是不知道表示方式是否正确
=>先求有再求好,只要不要犯结构性的问题

11.< 语意标签 >内还是可以抓< div >因为div是把东西分区块如< head >< div >< /div >< /head >