CSS知识 | 青训营笔记

chunchun2020
66 阅读2分钟

CSS知识 | 青训营笔记

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

image.png

CSS简介

h1{
 color:white;
 font-size:14px;
}

h1:选择器Selector

color,font-size:选择器Property

white:属性值

14px:声明Declaration

在页面中使用CSS

1.使用的几种方式

  • 代码
<!-- 外链 -->
<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文件

嵌入：把样式嵌入style标签里

内联（不推荐）：将标签的样式直接写在标签内

CSS是如何工作的

Screenshot_6.jpg

解析CSS ---添加样式到DOM节点---> 展示页面

选择器

1.定义

选择页面中的元素，以便给它们设置样式

2.选择元素的方式

（1）按照标签名、类名或id

（2）按照属性

（3）按照DOM树中的位置

3.分类

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

<style>
*{
    color: red;
    font-size: 20px;
}
</style>
  • id选择器 1.定义

写在<id>标签里

2.代码

<h1 id="logo">
  <img
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a105082aa5e04907b5bc00bf8295364d~tplv-k3u1fbpfcp-zoom-1.image" alt="HTML5 LOGO" width="48"/>
  HTML5文档
</h1>

3.示例

HTML5 LOGO HTML5文档

  • 类选择器

1.定义

写在<li class>标签里

2.代码

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done{
  color:gray;
  text-decoration:line-through;
}
</style>
  • 属性选择器
<label>用户名：</label>
<input value="zhao" disabled/>

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

含有[disabled]属性的即可选中

或属性为特定值才选中：input[type="password"]

伪类

1.定义

不基于标签和属性定位元素

2.分类

    状态伪类

    结构性伪类

3.具体介绍

  • 状态伪类

定义：不同状态下不同形式

a标签

a:link：普通链接状态

a:visited：访问后状态

a:hover：鼠标移动到链接上状态

a:active：鼠标按下链接状态

<a><a href="www.baidu.com">www.baidu.com</a>
<style>
a:link{
    color: black;
}

a:visited{
    color: gray;
}

a:hover{
    color: orange;
}

a:active{
    color: red;
}
</style>

输入框

:focus：按下的时候的输入框样式

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

<style>
:focus{
    outline:2px solid orange;
}
</style>

image.png

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少三个字符
</span>

<style>
.error{
   color:red;
}
input.error{
  border-color:red;
}
</style>

image.png

组合

image.png

  • 代码示例
<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <selection>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </selection>
</article>

<style>
  article p{
    color:black;
  }
  
  article > p{
    color:blue;
  }
  
  h2 + p{
   color:blue;
  }
  
</style>
  • 解释

article p:选中<article>标签下所有<p>标签元素

article > p:选中<article>标签下直接的第一个<p>标签元素

h2 + p:选中紧跟<h2>标签下的<p>标签元素

选择器组

body,h1,h2,h3,h4,h5,h6,ul,ol,li{
    margin:0;
    padding:0;
}
[type="checkbox"],[type="radio"]{
   box-sizing: border-box;
   padding:0;
}

颜色：RGB

表示：

（1）rgb(142,172,135)

3个数字分别表示红、绿、蓝

（2）#8fac87

两个单位对应一个颜色数值，十六进制

颜色：HSL

Hue:色相，色彩基本属性，如红黄等，取值0-360

Saturation:饱和度，色彩鲜艳程度，取值0-100%

Lightness:亮度，颜色明亮程度，取值0-100%

表示：hsl(18,91%,67%)

alpha透明度

表示透明程度，取值0-1，数值越大，不透明度越大，覆盖力越强

表示：#ff0000ff,rgba(255,0,0,1),hsla(0,100%,50%,1)

avatar
文章
阅读
粉丝