理解CSS（1）｜青训营笔记

用户1584838026816
56 阅读3分钟

理解CSS（1）｜青训营笔记

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

一、本堂课重点内容：

  • CSS 代码构成
  • CSS 使用方法
  • CSS 流程之选择器组、文本渲染
  • 调试 CSS

二、详细知识点介绍：

  • CSS是什么：用来定义页面元素的样式 设置字体和颜色 设置位置和大小 添加动画效果
    最基本的CSS代码： image.png

  • 在页面中使用CSS <!-- 外链 --> 比较推荐
    <link rel = "stylesheet" href = "/assets/style.css">
    <!-- 嵌入 -->
    <style> li{ margin: 0;list-style:none;} p ( margin: lem 0; ) </style>
    <!-- 内联 -->
    <p style = "margin:lem 0">Example Content</p>

  • CSS是如何工作的

image.png

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

  • 伪类 不基于标签和属性定位元素
    几种伪类
    状态伪类——在和用户的交互中存在不同的状态，可以设置不同状态下的交互样式
    结构性伪类——可以根据元素在父级结点中的相对位置找到它们

  • 组合

image.png

  • 颜色 - RGB（16进制） image.png

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

  • alpha透明度 alpha值为1不透明，为0透明

  • 字体 font-family 可以指定多个字体以适应不同设备上的字体库的差别
    英文字体写在中文字体前面

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

  • font-style
    normal正常，italic斜体

  • font-weight
    字体的粗细（100-900）
    并不是所有字体都支持所有的自重

  • line-height

image.png

  • 调试CSS ·右键点击页面，选择“检查”
    ·使用快捷键
    Ctrl+Shift+I（Windows）
    Cmd+Opt+I（Mac）

三、实践练习例子： （1）选择器

  • 通配选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
*{
  color: red;
  font-size: 20px;
}
</style>
  • 标签选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1{
  color: orange;
}
p{
  color: gray;
  font-size: 20px;
}
</style>
  • id选择器
<h1 id="logo">HTML5 文档<h1>
<style>
  #logo{
      font-size: 60px;
  }
</style>
  • 类选择器
<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li >Learn JS</li>
</ul>
<style>
.done{
  color: gray;
  text-decoration: line-through;
}
</style>
  • 属性选择器
<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled]{
    background: #eee;
    color: #999;
  }
</style>

·只有特定的值的属性才被选中

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"]{
    border-color: red;
    color: red;
  }
</style>

·属性的值匹配上某一个条件时做出的选择

href^="#"为属性值里以#开头的属性
 href$=".jpg"为属性值里以.jpg结尾的属性，即图片
<p><a href="#top"> 回到顶部</a></p>
<p><a href="a.jpg"> 查看图片</a></p>

<style>
  a[href^="#"]{
    color: #f54767;
    background: 0 center/lem
url(https://assets.codepen.io/59477/arrow-up.png)no-repeat;
    padding-left:1.1em;
  }
  
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em
url(https://assets.codepen.io/59477/image3.png)no-repeat;
    padding-left:1.2em;
  }
</style>

（2）伪类

  • 状态伪类
<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link{
  color: black;
}

a:visited{
  color: gray;
}

a:hover{
  color: gray;
}

a:active{
  color: red;
}

:focus{
  outline: 2px solid orange;
}
</style>
  • 结构性伪类
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战:原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li></ol>
<style> 
li {
  list-style-position: inside; 
  border-bottom:1px solid; 
  padding:0.5em
}

li:first-child { 
  color: coral
}

li:last-child{
  border-bottom:none;
}
</style>

（3）组合

  • 直接组合
<label>
  用户名:
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color:red;
}

input.error {
  border-color:red;
}
</style>
  • 其他组合类型
<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color:black;
  }

  article >p {
    color:blue;
  }
  
  h2 + p{ 
    color: red;
  }
</style>
  • 选择器组
body, h1, h2, h3, h4, h5, h6, ul, ol, li { 
  margin: 0; 
  padding:0;
}

[type="checkbox"],[type="radio"] { 
  box-sizing:border-box; 
  padding:0;
}

（4）字体

<h1>卡尔斯巴德洞窟(Carlsbad Caverns)</h1>
<p>卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园，位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以通过电梯直接到达230米的洞穴深处。</p>

<style>   
  h1 {
    font-family: 0ptima,Georgia, serif;
    }
  body {
    font-family:Helvetica，sans-serif;
    }
</style>
  • 使用Web Fonts
<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family:"Megrim"; 
    src:
url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) 
format('woff2');
}

h1 {
  font-family: Megrim，Cursive;
  }
</style>

（5）font-size

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size:20px;
  }
  
  section h1 {
    font-size:2em;
  }

  section.note {
    font-size:80%; 
    color:orange;
  }
</style>

(6)font-style

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style> 
  p{
    font-size:36px;
    font-family: "Helvetica Neue", sans- serif;
    }
    
  .normal{
    font-style: normal;
    }
    
  .italic{
    font-style: italic
    }
</style>

（7）font-weight

<ul>
  <li class="w1">锦瑟无端五十弦(100)</li>
  <li class="w2">锦瑟无端五十弦(200)</li>
  <li class="w3">锦瑟无端五十弦(300)</li>
  <li class="w4">锦瑟无端五十弦(400- normal) </li>
  <li class="w5">锦瑟无端五十弦(500)</li>
  <li class="w6">锦瑟无端五十弦(600)</li>
  <li class="w7">锦瑟无端五十弦(700-bold)</li>
  <li class="w8">锦瑟无端五十弦(800)</li>
  <li class="w9">锦瑟无端五十弦(900)</li>
  </ul>
  
<style>
  .w1{font-weight:100 }
  .w2{ font-weight:200 }
  .w3{ font-weight:300 }
  .w4{font-weight:400 }
  .w5{font-weight:500}
  .w6 { font-weight:600 }
  .w7{ font-weight:700 }
  .w8{ font-weight:800 }
  .w9{ font-weight:900}
</style>

（8）line-height

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

四、课后个人总结：

  • 对于各种选择器以及组合类型需要牢记，各种渲染的形式还需要课后进一步掌握
avatar
文章
阅读
粉丝