day50学习整理-前端基础-css

目录

• 2019/10/11 学习整理
• 前端之css基础
• 1|0 CSS介绍
• 2|0 CSS语法
  • 2|1 CSS实例
  • 2|2 CSS注释
• 3|0 CSS的几种引入方式
  • 3|1 行内样式
  • 3|2 内部样式
  • 3|3 外部样式
• 4|0 CSS选择器
  • 4|1 基本选择器
    • 元素选择器
    • ID选择器
    • 类选择器
    • 通用选择器
  • 4|2 组合选择器
    • 后代选择器
    • 儿子选择器
    • 毗邻选择器
    • 弟弟选择器
  • 4|3 属性选择器
  • 4|4 分组和嵌套
    • 分组
    • 嵌套
  • 4|5 伪类选择器
  • 4|6 伪元素选择器
    • first-letter
    • before
    • after
  • 4|7 选择器的优先级
    • CSS继承
    • 选择器的优先级
• 5|0 CSS属性相关
  • 5|1 宽和高
  • 5|2 字体属性
    • 文字字体
    • 字体大小
    • 字重（粗细）
    • 文本颜色
  • 5|3 文字属性
    • 文字对齐
    • 文字装饰
    • 首行缩进
    • 文字之间的距离
  • 5|4 背景属性

2019/10/11 学习整理

前端之css基础

1|0 CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2|0 CSS语法

2|1 CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

2|2 CSS注释

/这是注释/

注释是代码之母。

3|0 CSS的几种引入方式

3|1 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.

3|2 内部样式

嵌入式是将CSS样式集中写在网页的

标签对的标签对中。格式如下： 　　 　　 　　 

3|3 外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

4|0 CSS选择器

4|1 基本选择器

元素选择器

p {color: "red";}

ID选择器

#i1 { background-color: red; }

类选择器

.c1 { font-size: 14px; }
p.c1 {
color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器

* { color: white; }

4|2 组合选择器

后代选择器

/li内部的a标签设置字体颜色/

li a { color: green; }

儿子选择器

/选择所有父级是

元素的

元素/

div>p { font-family: "Arial Black", arial-black, cursive; }

毗邻选择器

/选择所有紧接着

元素之后的

元素/

div+p { margin: 5px; }

弟弟选择器

/i1后面所有的兄弟p标签/

#i1~p { border: 2px solid royalblue; }

4|3 属性选择器

/用于选取带有指定属性的元素。/

p[title] { color: red; } /用于选取带有指定属性和值的元素。/ p[title="213"] { color: green; }

不怎么常用的属性选择器

4|4 分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p { color: red; }

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div, p { color: red; }

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p { color: red; }

4|5 伪类选择器

/* 未访问的链接 */

a:link { color: #FF0000 }

/* 鼠标移动到链接上 */

a:hover { color: #FF00FF }

/* 选定的链接 */

a:active { color: #0000FF }

/* 已访问的链接 */

a:visited { color: #00FF00 }

/input输入框获取焦点时样式/

input:focus { outline: none; background-color: #eee; }

4|6 伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter { font-size: 48px; color: red; }

before

/在每个

元素之前插入内容

/ p:before { content:"*"; color:red; }

after

/在每个

元素之后插入内容

/ p:after { content:"[?]"; color:blue; }

before和after多用于清除浮动。

4|7 选择器的优先级

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body { color: red; }

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p { color: green; }

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

5|0 CSS属性相关

5|1 宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

5|2 字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }

字体大小

p { font-size: 14px; }

如果设置成inherit表示继承父元素的字体大小值。

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	描述
normal	标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值,默认值，

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

5|3 文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a { text-decoration: none; }

首行缩进

将段落的第一行缩进 32像素：

p { text-indent: 32px; }

去除li标签的样式

list-style: none;

文字之间的距离

将文字的间距调整为5像素：

p {

letter-spacing: 5px;

}

5|4 背景属性

/背景颜色/
background-color: red; /背景图片/ background-image: url('1.jpg');
/
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
/ background-repeat: no-repeat; /背景位置/ background-position: left top;
/background-position: 200px 200px;/

posted @ 2019-10-11 20:30 Wunsch06 阅读(...) 评论(...) 编辑 收藏

来源：https://www.cnblogs.com/Wunsch/p/11656674.html