（一）基础入门

CSS核心部分

1.CSS引入方式

  1. 内联样式/行内样式 （Inline CSS）直接在HTML元素的style属性中编写CSS代码。
  2. 内部样式 （Internal CSS）在HTML文档的<head>标签内使用<style>标签定义CSS规则。

  3. 外部样式 （External CSS）将CSS代码写在独立的.css文件中，然后通过<link>标签引入到HTML页面中。

    <link rel="stylesheet" type="text/css" href="style.css">

2.基本选择器

  1. 标签选择器
  2. 类选择器
  3. ID选择器
  4. 通配符选择器

更高级的：

  1. 交集选择器

    eg. 同时为p标签并且class中存在test类的元素才能被选中

    p.test#p {
  color: blueviolet;
}

  2. 并集选择器

    p, a, div {
  color: blueviolet;
}

3.高级选择器

  1. 后代选择器：选择某个元素的后代元素（子元素/更深层的元素）

    .content div p {
  color: blueviolet;
}

  2. 子选择器：选择某个元素的直接子元素

    .content > p {
  color: blueviolet;
}

  3. 相邻兄弟选择器：选择某个元素的相邻元素

    eg. 找到与.content相邻的下一个p元素

    .content + p {
  color: blueviolet;
}

  4. 属性选择器

    /* 选择 href 属性以 "https" 开头的a链接元素 */
a[herf="https://www.baidu.com"] {
  color: blueviolet;
}
    /* 选择携带了 href 属性的元素 */
a[href] {
  color: blueviolet;
}
    /* 选择所有 href 属性中包含 bing 这个字符串的元素 */
a[href*="bing"] {
  color: blueviolet;
}
/* 可以直接在后面添加一个小写或大写字母i来忽略大小写进行匹配 */
a[href*="Bing" i] {
  color: blueviolet;
}

4.选择器优先级

!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 标签/伪元素 > 通配符/继承

5.CSS样式继承

<div class="t1">
  <p>This is a paragraph</p>
</div>
.t1 { color: red; }

根据自动继承规则，p会继承t1的颜色；

如果我们希望p的color变回默认的值，那么也可以使用initial来指定其为初始值。

<div class="t1">
  <p style="color: initial">This is a paragraph</p>
</div>

字体样式

1.文本字体

常见的通用字体族包含：

  • serif（衬线字体）字体带有装饰性的小笔画，适用于正式文本
  • sans-serif（无衬线字体）无装饰笔画，现代、简洁，适合网页
  • monospace（等宽字体）每个字符宽度相同，适合代码
  • cursive（手写字体）类似书法或草书，适合装饰用途
  • fantasy（奇幻字体）设计感较强的艺术字体
p {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

导入字体：

@font-face {
  font-family: 'YuanShen';
  src: url("../font/yuanshen.ttf");  /* 使用url("")函数来指定位置，可以是本地文件，也可以是网络文件 */
}

2.文本大小

  1. 绝对尺寸：px（注意不要用小数）
  2. 相对尺寸：em、rem
<div class="test">
  我是第一句话
  <p>我是第二句话</p>
</div>
.test { font-size: 12px }
.test p { font-size: 1.5em }

计算可得，子元素的字体变成了18px的尺寸。

我们也可以使用smaller、larger这种预设的相对尺寸。

CSS3新增rem，它是直接相对于根元素html的字体大小进行调整的，也是现在更推荐的一种相对尺寸单位。

可以使用插件来实现px和rem的快速转换。

3.文本字重

使用font-weight来调整，它的值介于100-900之间。

.test {
  font-weight: 400;  /* 默认情况下，文本粗细为400 */
}

有些字体并不会支持所有的字重，在设置字体的粗细时，尽可能选择一些大部分字体都有的字重，比如：100细体、400常规、700粗体等。

CSS也有一些预设值可供选择：lighter（相对于父元素来说更细的字体）、normal（常规字体，与400等价）、bold（粗体字体，与700等价）、bolder（相当于父元素来说更粗的字体）

4.字体风格

可以使用font-style来控制字体的展示风格：

.test {
  font-style: normal;   /* normal就是常规字体风格，端正 */
}

5.字体颜色

使用rgb()或16进制颜色代码设置字体颜色。

也可以设置透明的颜色（rgba）：

.test {
  color: #FF00007F;   /* 和 rgba(255, 0, 0, 0.5) 等价 */
}

文本样式

1.首行缩进

由于我们并不知道文字具体会占用多少px宽度，因此这里更适合使用em来代表文字大小，而2em刚好就是当前文字大小的两个字。

.test p {
  text-indent: 2em;
}

2.文本对齐

.test p {
  text-align: left;
}
  • start：如果内容方向是左至右，则等于 left，反之则为 right。
  • end：如果内容方向是左至右，则等于 right，反之则为 left。
  • left：行内内容向左侧边对齐。
  • right：行内内容向右侧边对齐。
  • center：行内内容居中。
  • justify：文字向两侧对齐，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。
  • justify-all：和 justify 一致，但是强制使最后一行两端对齐。
  • match-parent：和 inherit 类似，区别在于 start 和 end 的值根据父元素的书写方向确定，并被替换为恰当的 left 或 right 值。

3.使文本从右往左

<p dir="rtl">
    这是从右往左的文字。
</p>
分类： 大前端 标签： CSS
版权申明

本文系作者 @xiin 原创发布在To Future$站点。未经许可，禁止转载。

评论

暂无评论数据

暂无评论数据

相关推荐

暂无相关推荐
获得点赞 0
文章被阅读 11
最后更新 26-02-24 12:14:11

目录

目录