前端基础知识之css

前端基础知识之css   https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。   css就是修饰那些html元素的

其主要内容为两大块： 找到标签 和  修饰标签

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

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

css的引入方式 三种

1.行内样式 style

2.内部引入（在html的head部分  <style>  </style>中间写入）

3.外部引入 （在html的head部分 <link  >  引入外部的css层叠样式表）

CSS选择器

元素选择器     p {color: "red";}

ID选择器    #i1 {background-color: red;}

类选择器  

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

注意：

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

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

通用选择器

* {
  color: white;
}

CSS属性相关(对元素修饰部分)

宽和高

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

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

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

 

字体属性

文字字体

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

 

简单实例：

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

 

 

字体大小

 p {

  font-size: 14px;
}

 

字重（粗细） 

 

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之间。

 

文字属性

 

文字对齐

 

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;
}

 

 

背景属性

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

支持简写：

background:#ffffff url('1.png') no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。