字节跳动青训营--前端day2

news2024/12/24 20:51:11

文章目录

前言
一、css
- 1. css的组成
- 2. css三种使用方式
- 3.css的工作方式
二、 css选择器Selector
- 1. 选择元素的方式
- 2. 伪类（pseudo-classes）
- - 2.1 状态伪类
  - 2.1 结构伪类
- 3.通过组合选择元素
- - 3.1 直接组合
  - 3.2 元素组合的拓展
- 4. 选择器的特异度（Specificity）
- 5. 样式覆盖
- 6. 样式继承
- - 6.1 显式继承：
  - 6.2 初始值
- 7. css求值过程
三、颜色
- 1. RGB
- 2. HSL
- 3. 透明度
四、布局（Layout）
- 1.布局相关技术
- 2.常规盒模型
- - 2.1 width
  - 2.2 heigth
  - 2.3 padding
  - 2.4 boeder
  - 2.5 margin

前言

仅以此文章记录学习历程

一、css

Cascading Style Sheets（用来定义页面元素的样式）

设置字体和颜色
设置位置和大小
添加动画效果

1. css的组成

在这里插入图片描述

2. css三种使用方式

通常建议时用外链和嵌入式（主要是样式分离）
在这里插入图片描述

3.css的工作方式

在这里插入图片描述

二、 css选择器Selector

作用：找出页面中的元素，以便给他们设置样式

1. 选择元素的方式

按照标签名（h1，div，p…）、类名class（.）或者id（#）
按照属性
按照DOM树中的位置

在这里插入图片描述
利用通配符匹配选择

2. 伪类（pseudo-classes）

定义：伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

两种伪类类型：

状态伪类
结构性伪类

2.1 状态伪类

<style>
/*默认状态*/
a:link{
    color:black;
}
/*点击后状态*/
a:visited {
    color:gray;
}
/*鼠标悬浮状态*/
a:hover{
    color: red;
}
/*输入框边框高亮样式*/
:focus{
    outline: 2px solid orange;
}
</style>
<body>
<a href="http://baidu.com">百度</a>
<label>
  <input type="text">
</label>

2.1 结构伪类

<style>
/*默认状态*/
li{
    list-style-position: inside;
    border-bottom: 1px solid;
    padding: .5em;
}
/*选中第一个*/
li:first-child{
    color: #ff99cc;
}
/*选中最后一个*/
li:last-child{
    border-bottom: none;
}
</style>
<body>
<ol>
  <li>泰坦尼克号</li>
  <li>星球大战</li>
  <li>阿凡达</li>
  <li>复仇者联盟</li>
  <li>速度与激情8</li>
</ol>
</body>

在这里插入图片描述

3.通过组合选择元素

3.1 直接组合

<style>
/*默认状态*/
.error {
    color: red;
}
/*通过类名和标签组合*/
input.error {
    border-color: red;
}
</style>
<body>
<label>
  用户名
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>
</body>