理解CSS(1)|青训营笔记

Jihye
148 阅读2分钟

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

CSS是什么？

CSS的基础代码

h1 {                         \\hl是选择器（selector），用来选择页面中的一些元素，来给这些元素定义样式
    color: white;          \\这里的color代表颜色属性，选择器（property） ，：后面表示属性值（value）
    front-size: 14px;     \\整个一行叫做声明（Declaration),用；隔开
}                               \\｛｝内包含的声明的和叫做声明块，加上h1整个叫做规则

在页面中使用CSS

三种类型

1.外链型

<!-- 外链 -->                \\较推荐
<link rel="stylesheet" href="/assets/style.css">      \\CSS的东西放入文件，link标签引入文件

2.嵌入型

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none: }       \\直接把样式代码嵌入
  p { margin: lem 0; }
</style>

3.内联型

<!-- 内联 -->            \\较不推荐
<p style="margin:lem 0">Example Content</p>        \\写在style属性当中，就不用写选择器了

CSS是如何工作的

288C06B2E2E5E61602C57FF0790D62C9.png

选择器Selector

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

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
   color: red;
   front-size: 20px;
}
</style>

输出：

87C239420B2196C0E82589B1A5FC9D07.png

标签选择器

<h1> This is heading</h1>
<p>this is some paragraph.</p>



<style>
h1{
  color: orange;
}
p {
  color:gray:
  front-size; 20px:
}
</style>

输出：

34DC06BFF224FFF8B05E3B155AFFB325.png

id选择器

<h1 id="logo">
  <img
src="https//assets.codepen.io/59477/h5-logo.syg"alt="HTML5 logo"width="48" />
   HTML5 文档
<h1>

<style>
 #logo {                  \\通过#来选中 
    font-size: 60px:
    front-weight: 200;
 }

输出：

9BA3870DD9B4AA7DA8F1A191304C4646.png

类选择器

<h2>Todo List</h2>
<ul>
   <li cass="done">Learn HTML</li>        \\用class给同一类型的一系列设置样式
   <li cass="done">Learn CSS</li> 
   <li>Learn TavaScript</li>
</ul>
<style>
.done{
  color: gray；
  text-decoration: lin- through;
}
</style>

输出：

11F5C07E71128042981D959558498463.png

属性选择器

<label>用户名：</label>
<input value="zhao"disabled/>                    \\disabled禁用的

![EE55F4D0C8C0C896A9C2B146AC50AF11.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1481a94704f4eba9815721c0c65f770~tplv-k3u1fbpfcp-watermark.image?)
<label>密码：</label>
<input value="123456" type="password" />

<style>
 [disabled] {                       \\这里表示只要有disabled属性就可以选中表示
   background: #eee;
   color: #999;
 }
</style>

输出：

7495AD264B487C73A41FE483BF97D675.png

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

<style>
 input[type="password"]{     \\只会选中方块中的，[]中也可以是一定的规则或者属性都ok
   border-color: red;
   color: red;
}
</style>

输出：

EE55F4D0C8C0C896A9C2B146AC50AF11.png

伪类（pseudo-classes)

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类（元素处于某种状态下样式）
    • 结构性伪类（根据处于的位置，类型来设置样式）

组合(Combinators)

9487BB867CD25C702BEECAC42E951E57.png

颜色

颜色-RGB表示法

C5598F6A515D21521A6AC1BCBBC24A53.png

颜色-HSL表示法

13C06C60A93D3B06BCCC1F4C0949F1E8.png

F66E00E9A370B0001398D678AE4A5BE3.png

颜色-alpha透明度

3F7EAD1DA577C0E54A7A882FE3AB8F46.png

字体

字体font-family

<style>
  h1{
    font-family: Optima,Georgia,serif;                \\指定了多个字体，因为不同设备上有的字体，不一样，从前到后有哪个匹配哪个
 }
 body{
   front-family:Helvetica,sans-serif:      \\serif,san-serif表示一类字体或者说是通用字体
}                                       
</style>

通用字体族

5DB91C3CCC7A23537A1BFAA2E7482167.png

使用Web Fonts

<style>
 @font-face{                         \\  @font-face指定文字名字    
   font-famiy:"字体名称";
   src:
 url(网站地址)format('woff2');         \\浏览器会尝试从url后面的网址下载文字
   }

font-size

  • 关键字
    • small,medium,large
  • 长度
    • px,em
  • 百分数
    • 相对于父元素字体大小

font-size:大小（px，em）；

font-style:normarl(正常)；italic（斜体）；

font-weight:字重（100——900）（400是normal，700是bold）；

line-height(行高)

调试CSS

  • 右键点击页面，选择检查
  • 使用快捷键
    • Ctrl+Shift+I(Windows)
    • Cmd+Opt+I(Mac)
avatar
文章
阅读
粉丝