css基础

一、定义与区分

html（盖房子）局限性：只关注内容的语义
css (美化)：层叠样式表、标记语言
html专注地做结构的呈现，样式交给css,即结构html与样式css的分离
css的语法由两个主要的部分构成：选择器以及一条或多条声明。

二、语法规则

  css样式是由选择器和声明构成的

<style type="text/css">    //标明使用的是css样式
选择器{
		属性1:属性值;
		属性2:属性值;
		......
		} 

属性与属性值之间用英文状态的冒号分隔

多个属性之间用英文状态下的分号分隔

选择器名城分大小写,属性和属性值不分大小写

当html的标签名作为选择器名时,不分大小写,习惯小写

css样式区分

方法一：行内样式 

 <p style="color: red;font-size: 30px;">我是红色的，30px的段落</p>

方法二:内部样式

             在同一html文件中使用，通常在head部位

<style type="text/css">
h1{
	text-align: center;  /* 对齐方式 */
	color: red;          /* 颜色 */
	font-size: 30px;     /* 字号 */
	}

方法三：链接外部样式表

一个外部样式表可以被多个网页应用
一个网页也可以引用多个外部样式表 

1.在html页面的头部输入

<link rel="stylesheet" href=" " />

2.新建css页面

使用css样式语法输入选择器与属性

h3{
		text-align: center;
		color: #0055ff;
	}

3.在HTML页面的link语句中的href属性输入css页面的位置

<link rel="stylesheet" href="css/style.css" />

方法四：导入式

@import url(css/style.css);

三、通配符选择器

 常用的通配符：       *（多个字符）      ？（单个字符）

* 代表所有标签

<style type="text/css">
*{
		margin: 0;   /* 外边距 */
		padding: 0; /* 内边距 */
			}
</style>

 标签选择器:

              html中的标签名作为选择器名称

<style type="text/css">
p{
				color:red;
				font-size: 25px;
			}
</style>

类选择器：

        格式：.类{

                              }

<style>		
		.red{
			color:red;
		}
        .rt{
			font-size: 30px;
		}
</style>

调用方法(可以调用多个方法)

<h1 class="red rt">这是一个标题标签</h>

id选择器

            id选择器:#定义   调用id  只能用一次

<style type="text/css">
    #box{
    width: 300px;
    height: 150px;
    background-color: #ff5500;
			}
</style>

调用方法：

<div id="box"></div>

  div标签

                        盒子标签，使用后盒子与盒子之间没有行距

                        常与id标签一起使用

        

四、style标签中常用的标签：

.font01{
        width: 300px;                /*宽*/
        height: 150px;               /*高*/
        border: 1px red solid;       /*边框 大小 颜色 实线*/
        background-color: #ff5500;   /*背景颜色*/
				
			}

文字的外观样式：

.red{
        font-family: "楷体";         /*字体*/
		font-size: 30px;             /*字号*/
		font-weight: bold;           /*加粗 700a*/
        font-weight:normal           /*取消加粗，正常字号*/
		font-style: italic;          /*倾斜*/
		color: red;                  颜色
        letter-spacing: 20px;        字符之间的距离 */
        word-spacing: 20px;          单个单词之间的距离
        line-height: 1.5em;          文字行间距/行高
		text-indent: 2em;            首行缩进
        text-transform: capitalize;  首字母大写
        text-transform: uppercase;   文本转大写
        text-transform: lowercase;   文本转小写
        text-decoration: underline;  文字下滑线
        text-decoration: overline;   文字上滑线
        text-decoration: none;       取消下划线
        text-align: center;          居中对齐

        text-shadow: 10px 10px 10px #ccc;    水平距离,垂直距离,透明度,颜色 
        
			}

常用：

当文字的行高与背景颜色的宽度相等时，文字就会出现在背景的中间

span标签

                         无任何样式，不换行

五、复合选择器

一、后代选择器

格式1：

                标签1  标签2{

                                             属性..........                                

                                                }

格式2：

                标签1  标签2 标签3{

                                             属性..........                                

                                                }

例：

div p{
				color: red;
			}

二、子代选择器

定义：只对其子代起到作用，对孙代等不起作用

.nav>a{
				text-decoration: none;
				}

三、兄弟选择器

1.好兄弟选择器：

定义：邻近兄弟，用+连接要选择的标签，只认识后面的标签，不认识之前的

h1+h2{
			font-style: italic;
		}

2.普通兄弟选择器

定义：用~连接，选择其后面所有的标签

h1~h2{
			border: 2px red solid;
		}

四、并集选择器

定义：用，连接，表示的是选择标签一与标签二

p,h3{
				color: red;
			}

五、标签指定式

定义：将样式指定给特定的标签 既...又... 

格式：标签.标签

p.spacial{
				color: red;
			}

h2.spacial{
				color: green;
			}

注意：

使用id标签选择器时要加#号

h2.one,h2#box{
				border: 1px blue solid;
			}

六、css三大特征

一、层叠性

定义：

当优先级相同的情况下,样式不冲突则全部叠加,样式冲突后,执行就近原则(后来者居上)

二、继承性

定义：

当子元素没有自己的样式的时候,会继承父元素的某些特征（文本样式的属性）,并不是所有的属性都会被继承（盒子模型）

三、优先级

定义：通配符<标签<类<id<行内样式<!important

选择器权重声明：

四大基础选择器：通配符<标签<类<id

/* 通配符<标签<类<id<行内样式<!important */
            

权重:
        通配符   0  0  0  0
         标签    0  0  0  1
         类      0  0  1  0
         id      0  1  0  0    
         行内    1   0  0  0
         !important    无穷大

        继承的权重是0
		复合选择器的权重会叠加,但是不会进位   0  0   0  12 

七、结构伪类

div

float: left;使得盒子在同一行出现

：root使得所有文字变成统一样式

1.only-child：

选择的是父元素中只有唯一的一个子元素的标签

格式：

<style type="text/css">
		p:only-child{
			color: red;
		}
	</style>

2.first-child

选择的是父元素中的第一个子标签

3.before与after

before选择的是标签的首部位置

after选择的是标签的尾部位置

格式：

<style type="text/css">
	p::before,p::after{
		content: "“";    添加标签
		}

八、链接伪类

顺序:爱恨原则 love hate

a:link {}    访问前
a:visited {} 访问后
a:hover {}   鼠标经过
a:active{}   鼠标点击时

text-decoration: none;         取消下划线
text-decoration: underline;    显示下滑线

li标签常用指令

list-style: none;        取消项目符号
display: inline-block;   块元素转换为行内块

九、盒子常用指令

margin:;    外边距
padding:;   内边距
background:;    背景
background-image:;    背景图片
background-color:;    背景颜色
border-redius:;       圆角
box-shadow:;          阴影