css学习-理解css | 青训营笔记

用户9531167365516
177 阅读4分钟

css学习-理解css | 青训营笔记

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

一、css简介

  • css全称Cascading Style Sheets
  • 用于定义页面元素样式，如：
    • 设置字体颜色
    • 设置位置与大小
    • 添加动画效果

二、如何在页面中使用css

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
    li{
        margin: 0;
        list-style:none;
    }
    p{
        margin: 1em 0;
    }
</style>
<!-- 内联 -->
<p style="margin: 1em 0">Content</p>

通常推荐外联与嵌入的方式使用css，内联通常用于为某个元素添加特殊的样式。

三、css工作流程

graph TD
加载HTMl --> 解析HTML --> 创建DOM树 --> 展示页面
解析HTML --> 加载css --> 解析css --> 创建DOM树

当出现错误拼写的css元素时，浏览器会直接忽略该元素。

四、css基本使用

选择器功能简介：

  • 找出页面中的元素，一边设置统一样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置

1. 选择器分类：

选择器类型示例介绍
通配符选择器*选择全体元素
标签选择器li选择某一类标签
类选择器（使用较多）.className选择类名相同的元素
id选择器#idName选择某特定id的元素
属性选择器[attribute][checked选择含有某属性的元素
属性选择器[attribute*^*=value]a[href^="#"]选择某一标签中且属性为某值开头的元素
属性选择器[attribute*$*=value]a[href$="jpg"]选择某一标签中且属性为某值结尾的元素
:linka:link选择所有未访问过的链接。
:visiteda:visted选择所有访问过的链接。
:hovera:hover选择鼠标指针位于其上的链接。
:activea:active选择活动链接。
:focusinput:focus选择获得焦点的 input 元素。

更多选择器看：css选择器

2. css颜色

css的color属性中，可以选择这几种写法：

  • rgb(255,255,255) 分别代表RGB的色值
  • #6a6a6a RGB的16进制表示
  • hsl(80,50%,60%) 第一个值代表色相，为0-360的一个值、第二个值为饱和度0%-100%，越高越鲜艳，第三个值为亮度0-100%，越高越亮
  • rgba(255,0,0,0.5) 相比rgb多了一个透明的，从0-1的小数
  • #ff000078 16进制多两位
  • hsla(80,50%,60%,0.5) 比hsl多了透明值0-1

3. 字体

font-family: Optima,Feorgia,serif; 设置字体， 自动从浏览器中选择存在的字体，左边的优先。

  • 使用Web Fonts：
@font-face{
    font-family:"Megrim";
    src:url()formate('woff2');
}

font-face会将url中的css样式加载到浏览器中，可以是本地的
如：url('font.ttf')
也可以是远程的
如：url('https://xxx.com/font.ttf')

  • 字体大小可用px，em，百分比等方式表示
font-size: 20px;
font-size: 2em;
font-size: 80%;
  • 字体粗细：
font-weight: normal;

粗细值从100到900，nornal代表400，bold代表700

4. 文字属性

  • line-height：

代表两行文字基准线直接的距离
当行高与容器高度相同时，可以实现文字居中对齐。

line-height: 10px;
  • text-align:

规定元素中的文本的水平对齐方式

text-align:center;

text-align有5个值，分别是

  1. left 把文本排列到左边，默认值。
  2. right 把文本排列到右边。
  3. center 把文本排列到中间。
  4. justify 实现两端对齐文本效果。
  5. inherit 规定从父元素继承 text-align 属性的值。
  • spacing
  1. word-spacing：增加或减少单词间的空白
word-spacing:25px;

可为负数，默认为0。

  1. letter-spacing：增加或减少字符间的空白即字符的间距
word-spacing:3px;

默认值为0，可为负数。

  • text-indent：规定文本块中首行文本的缩进
text-indent:50px;  /*首行缩进50px*/

默认值为0，可为负数。

  • text-decoration：添加到文本的修饰
值解释
none默认值。
underline文本下的一条线。
overline文本上的一条线。
line-through穿过文本下的一条线。
blink闪烁的文本。
inherit应该从父元素继承 text-decoration 属性的值。
  • white-space
值描述
normal默认值。空白会被忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行，直到遇到 <br> 标签为止。
pre-wrap保留空白符序列，正常地进行换行。
pre-line合并空白符序列，保留换行符。
inherit从父元素继承 white-space 属性的值。

引用自www.w3school.com.cn/css/index.a…

五、调试css

使用F12唤出开发者工具栏

使用Ctrl+Shift+C可以方便的选择元素，可以查看元素有的样式，并进行编辑

image.png 通过在浏览器上调试css，可以直观的看到css对元素的影响。

avatar
文章
阅读
粉丝