CSS笔记（一）

作者: songstar | 来源:发表于2020-08-18 22:04 被阅读0次

什么是CSS

CSS的作用是：可以给网页中的每一个元素设置样式（"化妆”、排版布局），让网页更加精美
完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片
CSS的全称是Cascading Style Sheets，层叠样式表

image.png

CSS样式的书写格式

CSS提供了各种各样、丰富多彩的CSS样式，书写格式如下所示

color：red

冒号：左边是样式名，冒号：右边是样式值

如何将CSS样式应用到元素上？

CSS提供了3种方法，可以将CSS样式应用到元素上

内联样式（inline style）

将样式直接写在元素的style属性上

<div style="color：white；background：red；"> 文字内容</div>

CSS样式之间用分号；隔开，建议每条CSS样式后面都加上分号；
在很多国内外资料中，“CSS样式”与“CSS属性"是同义词
- 样式名->属性名
- 样式值->属性值
  *有些人也把inline翻译为“行内”，其实在这里，用“内联”更合适，表示“内部自带”的意思

文档样式表（document style sheet）/ 也叫内嵌样式表（embed style sheet）

将样式写在head元素的style元素中,如下图所示

image.png
<style>元素的type属性值默认是text/css

外部样式表（external style sheet）

将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用

image.png
<link re1="stylesheet">元素的type属性值默认是text/css
外部样式表上头部建议都写上@charset="UTF-8"

@import

了解就可以，因为开发中我们不用，效率低
可以在style元素或者CSS文件中使用@import导入其他的CSS文件

<style>
@ import "test. css";
@ import ur1("index. css");
</style>

image.png

不建议使用@import导入CSS文件，它的效率比link元素低

小细节

*文档样式表、外部样式表，比内联样式多了个“表”字

内联样式只针对某个特定的元素
文档样式表、外部样式表可以针对一堆元素

等价写法

image.png

css注释

CSS的注释和HTML的注释是不一样的：/注释内容/（不能嵌套）
不要在CSS写html注释

HTML和CSS的编写准则

在编写HTML和CSS代码过程中，要遵守一个准则
- 结构、样式分离
  因此，不要使用HTML元素的属性来给元素添加样式，比如body的bgcolor,img的width\height等以下是不建议的写法
不建议的写法

<body bgcolor="red">
<img src="beer. png" width= "300" height="409">
</body>

建议的写法

image.png
CSS的一个很大作用是取代之前的font元素
font 已经被15废弃，已经过期（deprecated）：不推荐使用

网页图标

link元素除了可以用来引入CSS文件，还可以设置网页的图标（href的值是图标链接）,type一般不用写

<1ink rel="icon" type=" image/x-icon" href= "http: / /www. jd. com/ favicon. ico">

image.png

link元素的rel属性不能省略，用来指定文档与链接资源的关系
一般rel若确定，相应的type也会默认确定，所以可以省略type
网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32（单位：像素）
下载ico文件可以通过图标引擎

常见css属性

按照CSS属性的具体用途，大致可以分类为
文本：color.direction.letter-spacing.word-spacing、line-height.text-align.text-indent.text-transform、text-decoration、white-space
字体：font.font-family、font-style、font-size、font-variant.font-weight
背景：background.background-color.background-image.background-repeat.background-attachment.background-position
盒子模型：width.height.border.margin.padding
列表：list-style
表格：border-collapse显示：display.visibility.overflow.opacity.filter
定位：vertical-align.position、left、top、right.bottom、float.clear

注意后面会逐渐学习到这些CSS属性，目前没必要每一个都去查询了解，用多了自然就记住了（CSS属性名都是小写）

最常用的css属性

要想深刻理解所有常用CSS属性，最好先学会以下几个最基础最常用的CSS属性
color：前景色（文字颜色）
background-color：背景色
width：宽度
height：高度
font-size：文字大小

背景色和前景色

color属性用来设置文本内容的前景色
包括文字、装饰线、边框、外轮廓等的颜色

image.png

div

一般作为其他元素的父容器，把其他元素包住，代表一个整体用于把网页分割为多个独立的部分

image.png
通过上面的操作便可以看到有哪些东西用div盒子

float

让元素向某个方向移动

margin

外边距，元素与元素之间的间距

颜色

颜色，有以下几种表示方法
基本颜色关键字
red：红色，black：黑色，yellw：黄色，blue：蓝色，purple：紫色，white：白色

span {
background-color: red;
}

RGB颜色

十进制：rgb（red，green，blue）

RGB颜色：通过R（Red）、G（Green）、B（Blue）三种颜色通道的变化、叠加产生各式各样的颜色十进制表示形式
rgb（red，green，blue），每-种颜色取值范围0~255
rgb（255，0，0）：红色，rgb（O，255，0）：绿色，rgb（O，0，255）：蓝色，rgb（255，255，0）：黄色，rgb（0，0，0）：黑色，rgb（255，255，255）：白色

image.png

十六进制：#rrggbb、#rgb
十六进制表示形式

rrggbb，每-种颜色取值范围00~FF，大小写都可以

ff0000：红色，#0Off00：绿色，#000ff：蓝色，#000000：黑色，fffff白色，#fff00：黄色

image.png
建议:尽量使用#rgb取代#rrggbb,比如用#666 取代# 666666

RGB颜色规律

RGB颜色值越大，越靠近白色，越浅色
RGB颜色值越小，越靠近黑色，越深色
RGB颜色值-样的，一般是灰色，eg：#eee,#666……
可以缩减CSS代码的体积，从而减小文件大小，节省用户流量，加快网页响应速度

RGBA颜色：rgba（red，green，blue，alpha）

RGBA颜色在RGB颜色的基础.上加了个alpha，实现带有透明度的颜色
rgba（red，green，blue，alpha）
alpha取值范围是0.0~1.00代表完全透明，1代表完全不透明

image.png

CSS属性-text-decoration

text-decoration用于设置文字的装饰线
none：无任何装饰线
可以去除a元素默认的下划线
underline：下划线
overline：上划线
line-.through：中划线（删除线）
u、ins元素默认就是设置了text-decoration为underline

CSS属性-letter-spacing.word-spacing

letter-spacing.word-spacing分别用来设置字母、单词之间（有空格才算一个单词）的间距
默认是0,可以设置为负数

CSS属性-text-transform

text-transform用于设置文字的大小写转换可以设置以下值

capitalize：将每个单词的首字符变为大写
uppercase：将每个单词的所有字符变为大写
lowercase：将每个单词的所有字符变为小写
none；没有任何影响
建议：通过text-transform属性来控制网页中英文字母的大小写，不要直接在HTML中固定死书写形式

CSS属性-text-indent

text-indent用于设置第一行内容的缩进
text-indent：2em；刚好是缩进2个文字
如果是span里面的文字，则没有办法缩进，因为span本身长度是跟随着文字内容的长度

CSS属性-text-align

设置元素内容在元素的水平上的对齐方式
常用的值
left：左对齐
right：右对齐
center：正中间显示
justify：两端对齐

CSS属性字体相关

font-size

font-size决定文字的大小
常用的设置
具体数值+单位比如100px也可以使用em单位：1em代表100%，2em代表200%，0.5em代表50%
百分比
基于父元素的font-size计算，比如50%表示等于父元素font size的一半
一般给body设置font size就代表设置网页的默认字体大小其他元素可以基于父元素设置字体大小
到时候只需要改变body的字体大小，其他元素都会按照比例改变

font-family

font-family用于设置文字的字体名称

字体不同

可以设置1个或者多个字体名称（从左到右按顺序选择字体，直到找到可用的字体为止）

font-family：Consolas；
font-family:“微软雅黑"，Consolas，Symbol，"Microsoft Sans Serif"；

一般情况下，英文字体只适用于英文，中支字体同时适用于英文和中文所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面。

div{
font-family："Courier New"，“华文彩云”；
}

@font-face

@font-face可以让网页支持网络字体，不再局限于系统自带的字体

常见的字体种类
TrueType字体：拓展名是.ttf
OpenType字体：拓展名是.ttf.otf，建立在TrueType字体之上
Embedded OpenType字体：拓展名是.eot，OpenType字体的压缩版
SVG字体：拓展名是.svg、.svgz
web开放字体：拓展名是.woff，建立在TrueType字体之上
并不是所有浏览器都支持以上字体，使用时要多加测试
字体下载：http://font.chinaz.com/
@font-size的使用

image.png

font-weight

font-weight用于设置文字的粗细（重量）

image.png

100 | 200| 300 | 400 | 500| 600| 700| 800 | 900：每一一个数字表示一个重量
normal：等于400
bold：等于700
strong、b、h1 ~h6等标签的font weight默认就是bold

image.png

font-style

font-style用于设置文字的常规、斜体显示

normal：常规显示
italic：用字体的斜体显示发（如果字体不支持倾斜，则没办法倾斜）
opblique：文本倾科显示（跟字体没有关系）
一个字体可能包含正规字体、斜体
一个字体也可能不支持斜体
em、i、cite、address、var、dfn等元素的font-style默认就是italic

image.png
设置font-style为italic的span元素，使用效果等价于em元素

image.png

font-variant

font-variant可以影响小写字母的显示形式
可以设置的值如下
normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

image.png

网友评论

本文标题：CSS笔记（一）

本文链接：https://www.haomeiwen.com/subject/zcxxjktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

CSS笔记（一）

什么是CSS

CSS样式的书写格式

如何将CSS样式应用到元素上？

内联样式（inline style）

文档样式表（document style sheet）/ 也叫内嵌样式表（embed style sheet）

外部样式表（external style sheet）

@import

小细节

等价写法

css注释

HTML和CSS的编写准则

网页图标

常见css属性

最常用的css属性

背景色和前景色

div

float

margin

颜色

rrggbb，每-种颜色取值范围00~FF，大小写都可以

ff0000：红色，#0Off00：绿色，#000ff：蓝色，#000000：黑色，fffff白色，#fff00：黄色

RGB颜色规律

CSS属性-text-decoration

CSS属性-letter-spacing.word-spacing

CSS属性-text-transform

CSS属性-text-indent

CSS属性-text-align

CSS属性 字体相关

font-size

font-family

@font-face

font-weight

font-style

font-variant

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

CSS属性字体相关