CSS

一、css的引入方式

css ---  层叠样式表。  定义如何显示HTML元素。

引入方式

1：行内样式

如 ：<p style = "color:red"> Hello world</p>

2:  内部样式

在html中head头部加入<style>样式</style>

如：<style>

　　　　p{color:red}

　　</style>

3:  外部样式

外部样式就是将css单独写在一个独立的文件中，然后再页面头部引入即可。

如：<link href = "my.css"  rel = "stylesheet" type="text/css" />

 

这三种样式的优先级

1. 行内样式优先级最高

2. 选择器都一样的情况下，谁靠近标签谁就生效

3. 选择器不同时，通过计算权重来判断。

二、CSS选择器

1. 基本选择器

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

ID选择器  #p1 {font-size:16px;}

类选择器  .c1{color:green;}

通用选择器  *{color:blue;}

2.组合选择器

后代选择器   p span{color:red;}        /*用空格表示p内部的span标签，然后对这个span标签设置字体颜色*/

儿子选择器   div>p{color:blue;}　　/*选择所有父级是<div>元素的<p>元素*/　　 

毗邻选择器   div+p{color:red;}        /*选择所有紧挨着<div>元素之后的<p>元素*/

弟弟选择器   div~p{border:1px solid red;}    /*选择div后面所有的p标签*/

3.属性选择器

p[title]{color:red;}      /*用于选取带有指定属性的元素*/

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

[title^="hello"]{color:red;}       /*找到所有title属性以hello开头的元素*/

[title$='hello']{color:red;}　　/*找到所有title属性以hello结尾的元素*/

[title*="hello"]{color:red;}　　/*找到所有title属性中包含（字符串包含）hello的元素*/

[title~="hello"]{color:red;}　    /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/

4.分组

div,p{color:red;}    /*div标签和p标签统一设置字体为红色*/

5.嵌套

多种选择器可以混合起来使用，跟后代选择器一样

.c1  p{color:red;}     /*.c1类内部所有p标签设置字体颜色为红色*/

6.伪类选择器

a:link{}              /*未访问的链接*/

a:visited{}         /*已访问的链接*/

a:hover{}          /*鼠标移动到链接上*/

a:active{}          /*选定的链接（鼠标按下的链接）*/

input:focus{}     /*input输入框获取焦点时样式*/

7.伪元素选择器

 first-letter    常用给首字母设置特殊样式

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

before     在指定元素前插入内容

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after     在指定元素之后插入内容

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

其中，before和after多用于清除浮动。

.clearfix:before,.clearfix:after{
    content: "";
    display: block;
    clear:both;
}

 

三、选择器的权重

内联样式：1000

ID选择器：100

类选择器：10

元素选择器：1

注意：权重计算永不进位

 

四、CSS属性相关

1. 字体属性

font-family  文字字体   

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。*/

font-size:14px;    设置字体大小

font-weight   设置字体的粗细

font-weight的值有：

　　normal    默认值，标准粗细

　　bold        粗体

　　bolder     更粗

　　lighter      更细

　　100~900  设置具体粗细，400等同于normal,而700等同于bold

　　inherit      继承父元素字体的粗细值

color       文本颜色

　　十六进制 - 如  color:#ff00ff;

　　RGB表示 - 如  color:rgb(255,0,0);

　　颜色的名称 - 如  color:red;

　　此外，还可以通过rgba(255,0,0,0,5)  方式来设置，第四个值为alpha,颜色的透明度，范围为0.0~1.0之间。

2.文字属性

text-align  文本的水平对齐方式

text-align 的值有：

　　left       左对齐（默认）

　　right     右对齐

　　center  居中对齐

　　justify   两端对齐　　

text-decoration    给文字添加特殊效果

text-decoration 的值有：

　　none　　　　　　默认。定义标准的文本

　　underline　　　　下划线

　　overline　　　　  上划线

　　line-through　　　删除线　

　　inherit　　　　　　继承父元素的text-decoration属性的值

a {
  text-decoration: none;
}
/*常用给超链接去掉默认的下划线*/

text-indent     首行缩进

3.背景属性

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

简写方式 ：background:#fff url('1.png') no-repeat right top;

4.边框属性

border-width  　　边框线粗细值   如：border-width：2px;

border-style　　　边框线型样式  如：border-style：solid;

border-color　　　边框线型颜色  如：border-color：red;

简写方式： border:1px solid red;

border-style的值有：

　　none　　　　无边框

　　dotted　　　 点状虚线边框

　　dashed　　　矩形虚线边框

　　solid　　　　实线边框

5.display属性

用于控制HTML元素的显示效果。

display:none 和visibility:hidden的区别：

visibility:hidden  这个可以隐藏某个元素。但是隐藏的元素扔需占用与未隐藏之前一样的空间。换句话说就是，该元素虽然被隐藏了，但其所占空间位置仍然保留。

display:none  可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏，而且原本所占用的空间也会从页面布局中消失。

 

6.CSS盒子模型

margin　　外边距（元素与元素之间的距离）

padding　　内边距（内容与边框之间的距离）

border　　 围绕在内边距和内容外的边框

content 　　盒子的内容，显示文本和图像

margin:5px 10px 15px 20px;    顺序：顺时针（上、右、下、左）

margin:5px 10px 15px ;    顺序：上、左右、下

margin:5px 10px 15px;    顺序：上下、左右

margin:5px ;    上下左右都是5px

padding顺序同margin

 

7.float浮动

浮动元素会产生一个块级框，二不论它本身是行内标签还是块级标签。

浮动的两个特点：

　　a.浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　b.由于浮动框不在文档的普通流中，所以文档的普通流中的边框表现的就像浮动框不存在一样。

float:left;    向左浮动

float:right;    向右浮动

float:none;    默认值，不浮动

clear 属性规定元素的哪一侧不允许其他浮动元素。

以下是解决浮动带来的塌陷问题

.clearfix:before,
.clearfix:after{
     content:"";
     display:block;
     clear:both;      
}    

 

8. overflow溢出属性

overflow:visible;    默认值。内容不会被修剪，会呈现在元素框之外。

overflow:hidden;   内容会被修剪，并且其余内容是不可见的。

overflow:scroll;      内容会被修剪，但是浏览器会显示滚动条，可以查看其余的内容。

overflow:auto;       如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow:inherit;    规定应该从父元素继承overflow属性的值。

 

overflow     水平和垂直均设置

overflow-x   设置水平方向

overflow-y   设置垂直方向

 

9. position 定位属性

position:static  默认值，无定位，不能当做绝对定位的参照物，并且设置标签对象的left,top等值是不起作用的。

position:relative;   相对定位。以自己原始位置为参照物。

position:absolute;  绝对定位。以靠自己最近的已定位的祖宗元素作为参照物定位的。如果元素没有已定位的祖宗元素，那么它就以body元素作为参照物。

position:fixed;  固定定位。对象脱离文档流，以窗口为参考点 进行定位。

 

10. z-index属性

设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index仅能在定位元素上奏效。

 

11.opacity (定义透明度)

　　范围是0.0~1.0

　　和rgba()的区别：

　　　　a:  opacity改变元素、子元素的透明度效果

　　　　b:  rgba()  只改变背景颜色的透明度效果。