CSS基础总结 | 青训营笔记

syrlinkstart
158 阅读6分钟

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

一、重点内容：

  • CSS选择器
  • 字体与文本设置
  • 背景与颜色设置

二、CSS基础：

css1.png

CSS选择器

1. 标签选择器

  • 语法：标签名 {...}
/* 
    <p>p标签</p>
*/

p {
    color: pink;
}

2. 类选择器

  • 语法：.类值 {...}
  • 标签中添加class属性，class="类值"
  • 选中所有拥有此类值的标签
/*
    <p class="nav"></p>
*/
.nav {
    color: pink;
}

3. id择器

  • 语法：#id值 {...}
  • 标签中添加id属性，id="id值"
  • id值在所有标签中是唯一的
  • id值不能是数字开头，必须是字母、下划线、$开头
  • 选中唯一拥有此id值的标签
/*
    <p id="logo"></p>
*/
#log {
    color: pink;
}

4. 属性择器

  • 语法：[属性名] {...} 或 [属性名="属性值"] {...}
  • [属性名]，选中拥有某种属性的标签
  • [属性名="属性名"]，选中特定属性值的标签
/*
    <input type="text" disabled>
*/
[disabled] {
    ...
}
[type="text"] {
    ...
}

5. 链接伪类择器

  • 语法：一般都带有" : "
  • a:link {...}，选择所有未被访问的链接
  • a:visited {...}，选择所有已被访问的链接
  • a:hover {...}，选择鼠标指针位于其上的链接
  • a:active {...}，选择活动链接（鼠标按下未弹起的链接）
  • 这四种必须按着顺序声明，不能改变顺序，记住lvha顺序(love hate)
  • 链接默认下划线样式需要单独给a标签修改
/*
    <a href="https://www.bilibili.com/">[]~(￣▽￣)~*</a>
*/
a:visited {
    color: green;
}
a:hover {
    color:brown;    
}

5. 位置伪类选择器

  • 语法：一般都带有" : "
  • :nth-child {...}
  • 例如：p:nth-child(3) {...}，表示从找到的第1个p标签开始数，找到第3个p标签设置样式
  • 例如：p:nth-child(2n+1) {...}，第2n+1(n=0,1,2...)p标签设置样式
  • 例如：p:first-child {...} ，p:last-child {...} p标签第一个，最后一个设置样式
/*
    <p>111</p>
    <p>222</p>
*/
p:nth-child(2n) {
    color: lightblue;
}

6. 其他伪类择器

  • 语法：一般都带有" : "
  • :focus 用于选取获得焦点的表单元素。
  • :focus-within：点击详情
  • 焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
  • input:focus {...}
/*
    <input type="text" placeholder="你好">
*/
input:focus {
    background-color:lightcoral;
}

7. 后代选择器

  • 空格隔开
  • 选择的是元素一下的所有子元素，包括子孙元素等
/*
<div class="main">
    1
    <div class="nav">
        2
        <div class="insert">3</div>
    </div>
    <div class="side">
        2
    </div>
</div>
*/
.main .nav{
    color: lightcoral;
}

8. 子选择器

  • 选择器一>选择器二 {...}
  • 大于号隔开
  • 选择的是元素一最直接的子元素，不包括子孙元素等
/*
<div class="main">
    1
    <div class="nav">
        2
        <div class="insert">3</div>
    </div>
    <div class="side">
        2
    </div>
</div>
*/
.main > .nav{
    color: lightcoral;
}

9. 并集选择器

  • 选择器一,选择器二 {...}
  • 逗号隔开
  • 可以同时选择读个标签，同时定义相同的样式
/*
    <div class="nav"></div>
    <div id="logo"></div>
*/
.nav,#logo {
    background-color:lightcoral;
}

字体设置

1. font-family

  • font-family = "微软雅黑","..." 可以在mdn查一查
  • 属性值可有多个字体，用逗号隔开，从第一个字体开始，游览器有哪个字体就用哪个字体

2. font-size

  • font-size: 16px：谷歌游览器默认是字体16px大小
  • font-size: 2em：父级字体大小的两倍大小
  • font-size: 80%：父级字体大小的80%大小

3. font-weight

  • font-weight: "normal"：normal(400)，默认值，定义标准的字符。
  • font-weight: "bold"：bold(700)，定义粗体字符。
  • font-weight: "bolder"：bolder(900)，定义更粗的字符。
  • font-weight: "lighter"：定义更细的字符。
  • 开发中更提倡使用数字100-900

4. font-style

  • font-style: "normal"：normal默认值。标准的字体样式。
  • font-style: "italic"：italic，斜体的字体样式。
  • font-style: "oblique"：oblique 倾斜的字体样式。
  • font-style: "inherit"：inherit 从父元素继承字体样式。

文本设置

1. text-align

  • text-align: "left"
  • 左对齐：left
  • 右对齐：right
  • 居中：center

2. text-decoration

  • text-decoration: "none"
  • 无任何装饰：none
  • 下划线：underline
  • 上划线：overline
  • 删除线：line-through

3. text-inden

  • text-indent = "2em"：缩进当前两个文字大小的距离
  • 文本的第一行缩进

4. line-height

  • line-height = "20px"或1.6(字体的1.6倍行间距) css2.png

5. text-shadow

  • text-shadow: x, y, r, color
  • x：正方向朝右
  • y：正方向朝下
  • r：模糊半径
  • color：模糊颜色
  • 例如：text-shadow: 2px 2px 2px red

6. 总结

  • text-algin：文本对齐方式(本质是在当前标签盒子内对齐)
  • text-decoration：文本装饰下划线、删除线
  • text-indent：文本缩进
  • text-shadow：文本阴影
  • line-height ：文本行高
  • letter-spacing: 2em：字与字之间的距离
  • word-spacing: 2em：单词与单词的距离
  • white-space 是用来设置如何处理元素中的空白。点击了解
  • text-overflow 确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。点击了解
  • overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。点击了解

文字在当前盒子内垂直居中方法

水平居中：text-algin: center

垂直居中：line-height: 盒子height的高度

inherit：关键字使得元素获取其父元素的计算值(显示继承)。点击了解

背景设置

1. background-color

  • CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

2. background-image

  • background-image: url(图像路径地址)
  • 渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

3. background-size

  • background-size: 宽 高; 设置背景图片大小
  • background-size:cover： 一直放大直到占满整个背景

4. background-repeat

  • background-repeat 背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
  • 默认情况下，属性值为repeat
  • repeat 背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。

5. background-position

  • background-position: x y;： x(右)，y(下)
  • 参数是方位名词，left top 或 rigth center(只写一个参数的话，默认第二个参数是center)
  • 参数是精确单位，距离盒子左边x像素，距离盒子上边y像素
  • 方位名词和精确单位可以混用，background-position: 20px left

6. background-attachment

  • background-attachment 设置背景图像是否固定或者随页面的其余部分滚动
  • scroll 默认的，背景图像是随对象内容滚动
  • fixed 背景图像固定

颜色设置

1. RGB

  • 语法：color: RGB(red,green,blue)
  • 通过三种颜色的不同浓度来调配出不同的颜色
  • 每一种颜色在 0-255(0-100%) 之间

2. RGBA

  • 语法：color: RGBA(red,green,blue,a)
  • 就是在RGB的基础上增加了一个不透明度a的值
  • 0~1:透明~不透明

3. 16进制的RGB

  • 语法：color: #redgreenblue(对应16进制)（最后两位数是透明度00-99，不写默认是不透明）
  • 颜色浓度通过，00-ff 16进制形式表示 如 #ff0000

4. HSL

  • 语法：color: hsl(H, S, L, a)
  • H 色相(0-360)
  • S 饱和度，颜色的浓度 0%-100%
  • L 亮度，颜色的亮度 0%-100%
  • a 透明度 0-1

四、引用参考：

MDN

avatar
文章
阅读
粉丝