CSS样式引入方式和部分CSS样式的设置

一、三种引入方式以及其应用场景

1.行间样式，当样式非常少、在一组选择器内需要优先样式，缺点是不是人看的代码样式，影响布局结构的视觉效果

a、写在起始标签的style属性里，各样式之间用“；”隔开

2.内部引入方式，当页面布局少情况下使用，缺点是扩展性差，布局稍微多一些就需要来回滚动页面，很麻烦

a、标签选择器，也就是body中对应的所有相同类型标签，对它们进行样式设置

b、类选择器class选择器，在body中定义标签的时候，设置标签的class也就是类名，通过类名进行样式设置，类名可以重复，类名的命名方法需要以字母开头，后面可以追加数字、字母、下划线、横线

3.外部引入方式，在开发项目或者页面布局多的情况下使用，扩展性很好，缺点是需要引用，浏览器就需要加载更多的文件

外部引入的方式：

1.建一个.css文件

2.用<link rel="stylesheet" href="文件相对路径">引入

二、部分CSS样式设置

1.width

宽是内容的宽，也就是content的宽

2.height

高是content区域的高

3.background

（1）background-color背景颜色

颜色值可以用以下几种方式

①.76D2FA 十六进制的数

②.red 表示颜色的单词

③.rgb red green blue也就是红绿蓝，取值范围都是0-255

④.rgba alpha值，表示透明度，取值范围是0-1，值越小透明度越高

（2）background-image背景图片

①.background-image，在url中写入背景图片的路径，相对路径

②.background-repeat属性定义背景图片是否需要重复或平铺

③.background-size定义背景图片的尺寸，两个参数分别是宽和高，如果需要图片显示不失真，则定义其中一个，另一个自适应auto，也就相当于定义了宽的尺寸，高等比缩放

④.background-position定义背景图片的位置，两个参数px，分别是x方向和y方向的距离，x正方向向右，y正方向下；百分比的话，50%中间，100%最右边

⑤.background-attachment定义背景图片是否随内容滚动而滚动：fixed不动，scroll随动而动

⑥.lorem+数字就出现多少单词

⑦.background-origin：背景图位置

content-box、从内容区域开始显示背景

padding-box、从padding区域开始显示背景，默认

border-box、从边框区域开始显示背景

text从文本区域开始显示背景 火狐不支持，IE9、10不支持

温馨提示：需要rgba的配合 透明度的配合

⑧.background-clip:背景剪裁

content-box、

padding-box、

border-box

⑨、可以设置多背景，同时它们的尺寸，位置等都可以有复合写法

background-image: url("1.png"),url("1.png");

background-size: 100px 100px,150px 150px;

background-position: 10px 10px,110px 110px;

background-repeat: no-repeat;

⑩、背景颜色，背景图片的简写：

background：color image repeat attachment position;

4.color：文字的颜色

5.font-size：文字的大小，最小是12像素，无最大上限

6.text-indent：文字左边的缩进

7.text-align：文字的水平对齐方式

1.left 默认

2.right 靠右对齐

3.center 居中对齐

(注意：父级的text-align

1.对块元素子级的对齐方式无效，但是对块元素子级文本有效，是因为继承了父级的样式属性；

2.对行元素子级的对齐方式有效。)

vertical-align:文字的垂直对齐方式

baseline（默认）文字图片div的底部对齐

top顶部对齐

bottom底部对齐

middle中间对齐

可以解决在流式布局弹性图片状态下，图片下面多余 4px 空隙的bug（以后会进行解释）

8.text-decoration：文本修饰

underline下划线、

overline上划线、

line-through穿线、

none没有，

可以同时给；

有一个闪闪的，但是不支持，所以不用学

9.font-famliy：文字的字体设置，可以给多个

9.font-style文字样式 italic倾斜

10.font-weight：文字加粗设置

1.bold，bolder，lighter，表示加粗，更粗，更细

2.也可以写具体像素，100-900，700相当于bold，400相当于normal

11.border: 1px solid blue;内边框

边框的尺寸 边框的样式solid实线、dashed虚线、dotted点线 边框的颜色

border-width: 1px;

border-style: solid;

border-color: blue;

border-top: 5px solid blue;

border-left: 10px dashed red;

border-right: 10px dotted red;

border-bottom: 10px solid cyan;

不写像素默认3px，不写颜色默认文本颜色，样式必须写

outline:外边框 区别于border，不占位置

12.border-radius：50% 圆角，接受指令：百分比或XXpx

可以每个角分开写，比如：

border-top-right-radius：

border-radius: 150px/10px;

斜杠前面的数值是水平半径，后面的是垂直半径

13.overflow溢出

1.overflow：hidden；

溢出部分隐藏

2.overflow：visible；

溢出部分显示，这是默认值

3.overflow：scroll；

出现滚动条的位置，一直有

4.overflow：auto;

溢出出现滚动条，不溢出不出现

14.list-style列表属性

一、list-style-type：设置列表项标记的类型

是指在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。

1.disc实心圆标志，默认

2.circle空心圆

3.square实心方块

4.等等

二、list-style-position：设置在何处放置列表项标记

1.inside列表项目标记放置在文本以内，且环绕文本根据标记对齐

2.outside保持标记位于文本的左侧；列表项目标记放置在文本外，且环绕文本不根据标记对齐，默认值

3.inherit规定应该从父元素继承

三、list-style-image：使用图片来替换列表项的标记

1.url图片的路径

2.none无图片被显示，默认

3.inherit规定应该从父元素继承

简写方法：list-style：type position image；

15.隐藏元素的方法

1.display：none,可以理解为不展示div，同时也不再占用空间

2.设置opacity不透明度，取值0-1，0完全透明，1完全不透明,透明度为零后依然占用空间

3.visibility设置元素的可见性，hidden隐藏、visible可见，隐藏后占用空间

16.倒影目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

-webkit-box-reflect：right/left/blow/above 10px linear-gradient（to top，

rgba（255，255，255，1） 10px，

rgba（255，255，255，0.3） 80px，

rgba（255，255，255，0） 200px

）；

-webkit-box-reflect：right/left/blow/above 10px url("图片路径")）；

第一个值：倒影方向

第二个值：倒影与本体之间的距离，为具体的数值

第三个值：可以是透明度的渐变，

也可以是一个png透明的图片

17.蒙版目前只有-webkit-内核的浏览器支持（谷歌、Safari、新欧朋opera），其他不支持

需要png的透明度遮罩

-webkit-mask:url("png的图片，需背景透明")

和背景设置一样，可以设置多个png图为蒙版