时间戳

首页 > 技术文章 > CSS简介，引入方式，文字和文本样式设置

CSS简介，引入方式，文字和文本样式设置

youknowUL 2019-09-11 19:38 原文

转载自https://www.yuque.com/books/share/ef380286-9a88-4f63-b6df-750cf65c1e48/mgpg0f"

1.CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
  • CSS 样式表极大地提高了工作效率

2.CSS基础语法

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
  • 每条声明由一个属性和一个值组成 
  • 选择器 { 属性名：属性值；属性名：属性值….} 
  • 由多组属性名和属性值组成，而且每一组属性名和属性值之间用分号隔开

image.png

selector {declaration1; declaration2; ... declarationN }

//选择器{属性名: 属性值}
selector {property: value}

// 案例分析: 
h1 {color:red; font-size:14px;}

 

3.CSS引入方式

行内式

  • 直接写在标签内，通过标签属性style引入； 
  • <开始标签 style = "属性名：属性值"> 内容 </ 结束标签>
<div style="color:red;">我是div元素</div>

 

内嵌式

  • 将css代码写在style元素内，通过css选择器来选择html元素，将css样式添加给这个元素；
<style>
    div{color:red;}
</style>
<div>div1</div>
<div>div1</div>

 

外链式

  • 将css代码单独放在一个css文件中，再通过link标签将这个css文件引入到html页面中;
<link rel="stylesheet" href="css.css" type="text/css">

 

导入式

  • 引入一个单独的css文件
  • 在style元素或者link样式中；
  • 它既不是html标签，也不是css样式；
  • 它一条声明语句；
<style>
   @import "index.css";
</style>

 

4.外链式和导入式的差别(面试题)

  • link和@import虽然都是引入外部的css文件，但是他们是由天差地别的区别的;
  • link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中;
  • 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载;
  • 当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为@import是不能被DOM控制的;

 

5.CSS颜色设置

颜色的三种表示方式

  • 十六进制颜色：十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
  • RGB颜色：RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）
  • 颜色的名称：例如： white，red，black等等；

 

RGBA的作用

  • RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道， 它规定了对象的不透明度，alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

 

常用的颜色

  • 黑色： #000 、 rgb(0,0,0,)、black
  • 白色： #fff、rgb（255,255,255）、white

6.CSS样式之Font文字设置

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

  • font 复合样式 font-style | font-weight | font-size | line-height | font-family
  • 字体风格: font-style
  • 字体粗细: font-weight
  • 字体大小: font-size
  • 字体系列: font-family
image.png

7.CSS样式之Text文本设置

CSS文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

  • 文本颜色： color
  • 字符间距 : letter-spacing
  • 设置行高： line-height
  • 文本对齐方式： text-align
  • 文本修饰： text-decoration
  • 文本缩进： text-indent ( em缩进字符）
  • 文本阴影： text-shadow
  • 文本转换 ： text-transform
  • 设置元素的垂直对齐：vertical-align
  • 设置元素中空白的处理方式： white-space
  • 设置字间距 ：word-spacing

image.png

推荐阅读