CSS基本代码

CSS初始化:

一般可以复制别人的 

 1.CSS选择器:

(1)基础选择器:

用法:是由单个选择器组成的

基础选择器包括: 标签选择器,类选择器,id选择器,通配符选择器

①标签选择器(标签)

是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式，只能选择全部的当前标签

 ②类选择器(class)

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“”号显示。

注意: 

1.类选择器使用" . "（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)。
2.可以理解为给这个标签起了一个名字，来表示。
3.长名称或词组可以使用中横线来为选择器命名。
4.不要使用纯数字、中文等命名，尽量使用英文字母来表示。
5.命名要有意义，尽量使别人一眼就知道这个类名的目的。
6.命名规范︰见附件( Web前端开发规范手册.doc )
7.可以有多个类名,中间必须用空格隔开

多类名使用场景:1.可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
                          2.这些标签都可以调用这个公共的类,然后再调用自己独有的类.
                          3.从而节省CSS代码,统一修改也非常方便.

③id选择器(id)

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以 id属性来设置id选择器，CSS中id选择器以“#"来定义。

语法:

注意:id属性只能在每个HTML文档中出现一次。口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用

与类选择器的区别:

1.类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。2.id选择器好比人的身份证号码全中国是唯一的，不得重复。
3.id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

④通配符选择器(*)

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)。

语法:

 

注意:1.通配符选择器不需要调用，自动就给所有的元素使用样式
         2.特殊情况才使用 

一图流总结:

(2)复合选择器:

用法:复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器:后代选择器、子选择器、并集选择器、伪类选择器等等

①后代选择器(空格)

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。  

②子选择器(>)

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

 语法:
 

 像这种用子选择器就只会改变儿子,不会改变孙子;而用后代选择器,儿子孙子都会改变

③并集选择器(,)

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。用法是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法:

 

④伪类选择器(:)

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法:

 

注意:1.多种效果要按LVHA顺序写;
        2.a链接都需要单独指定样式,像body {color:red}这种就不行 ;

特殊:专用于表单的input:focus{background-color:pink;} ,光标在哪个表单,哪个表单就变颜色

一图流总结:

2.CSS字体属性:

作用:用于定义字体系列、大小、粗细、和文字样式(如斜体)。

(1)字体系列:font-family
注:1.有空格隔开的多个单词组成的字体加引号2.可以使用多个字体,第一个没有,就用第二个等

(2)大小 :font-size
注:要加px单位

(3)粗细:font-weight

(4)文字样式:font-style

 

字体属性总结(一图流):

3.CSS文本属性 :

作用:可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

(1)文本颜色:color:

(2)对齐文本:text-align

(3)装饰文本text-decoration 

(4)文本缩进text-indent

用px或者em(相对于当前元素的一个文字大小)

(5)行间距line-height :

用px,每次改变是改变的文字上边距和下边距的距离

文本属性总结(一图流):

4.CSS样式引入方式:

(1)内部样式表:

用法:是写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

(2)行内样式表:

用法:是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<p style="color: pink;">给我一个粉红的回忆</p>

 (3)外部样式表(常用) :

用法:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.
①新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
②在HTML页面中，使用<link>标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

一图流总结:

5.CSS显示模式: 

显示模式转换:
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block; 

6.CSS背景

作用:可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等

(1)背景颜色:background-color:颜色值;

(2)背景图片:background-image:url(url)

(3)背景平铺:background-repeat

(4)背景图片位置:background-position

 注意:.1.如果是方位名词,写一个,另一个默认为居中对齐
           2.如果用混合单位(就是方位和精确一起用),第一个必须是x的值,第二个必须是y的值

(5)背景图像固定background-attachment

复合写法:
例:background: transparent url(image.jpg) repeat-y fixed top ;

(6)背景色半透明: background: rgba(0,0,0,0.5)
最后一个参数是透明度,在0~1之间

背景总结(一图流):

7.CSS盒子模型:

包括:边框(border),外边距(margin),内边距(padding),实际内容(content)

清除内外边距: 基本是css第一行代码

(1)边框(border)
 由 边框宽度(粗细),边框样式,边框颜色组成

①边框宽度(border-width)单位px

②边框样式(border-style)

实线边框:solid
虚线边框:dashed
点线边框:dotted

③边框颜色(border-color)

复合写法:border:1px solid red;(没有固定顺序)
               可以只改变一条边框,比如border-top:2px dashied red;

注意:如果盒子设置了宽高,边框宽度会影响盒子实际大小

圆角边框:border-radius:数值px或百分比;
可以跟4个值,分别代表左上,右上,右下,左下或者单独写border-top-left-radius

(2)外边距(margin单位px)

margin-left
margin-bottom
margin-left
margin-right

注意:如果要水平居中,盒子必须指定宽度,而且是块级元素,行内元素或行内块元素给其父添加text-align:center即可

嵌套块元素垂直外边距塌陷问题解决办法

(3)内边距(padding单位px)

padding-top
padding-bottom
padding-left
padding-right

复合写法:padding:5px 10px 20px 30px(按上右下左的顺序排列),1个值的时候表示上右下左全设置,2个值表示上下是第1个值,左右是第2个值

注意:如果盒子设置了宽高,再设置内边距,会影响盒子实际大小

盒子阴影(box-shadow): 

注:必须要写前两个值,建议写前五个值,最后一个默认是外阴影,要改才写,不改不写 

文字阴影(text-shadow):

8.网页布局方式:

1.标准流
2.浮动
3.定位

网页布局第一准则︰多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
网页布局第二准则:先设置盒子大小,之后设置盒子的位置.

 (1)浮动

作用:可以让多个块级元素一行内排列显示

浮动元素的特性:

1.脱离标准流的控制(浮) 移动到指定位置(动),俗称脱标
2.浮动的盒子不再保留原先的位置 
3.浮动元素会具有行内块元素特性。
4.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
5.浮动的盒子中间是没有缝隙的，是紧挨着一起的

注意:浮动一般都是一浮全浮

清除浮动

原因:清除浮动元素造成的影响
如果父盒子本身有高度,不需要清除浮动,因为清除浮动本质是自适应高度

语法:选择器{clear:both;}

方法:

清除浮动总结(一图流)

(2)定位 

作用:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

组成:定位=定位模式+边偏移

定位模式:用于指定一个元素在文档中的定位方式
边偏移:决定该元素的最终位置

①定位模式:

重要口诀:子绝父相(子级是绝对定位的话,父级要用相对定位 

静态定位(了解):是元素的默认定位方式,无定位的意思,按照标准流特性摆放位置,没有位偏移
相对定位: 1.相对于自己原来的位置来移动的;
                 2.会保留自己原来的位置;
绝对定位:1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位;
                2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为                       参考点移动位置;
                3.不保留自己原来的位置;
固定定位:1.以浏览器的可视窗口为参照点移动元素;
                2.跟父元素没有任何关系;
                3.不随滚动条滚动;
                4.不保留自己原来的位置;
粘性定位:

 

②边偏移:

如果出现定位盒子重叠,可以加z-index:数字;,越大盒子越靠上,一样按书写顺序后来居上

定位总结(一图流): 

9.CSS属性书写顺序:

 10.元素的显示与隐藏:

1.display2.visibility3.overflow

1.display(可搭配js,重要)

语法:

display:none; 隐藏对象
display:block; 除了转换为块级元素外,同时还有显示元素的意思

注意:display隐藏元素后，不再占有原来的位置。

2.visibility

语法:

visibility:visible; 元素可视
visibility:hidden; 元素隐藏

注意:visibility隐藏元素后,继续占有原来的位置。

3.overflow

语法:

注意:如果有定位的盒子,请慎用overflow:hidden,因为它会隐藏多余的部分