Web三剑客-CSS笔记

CSS

CSS的导入方式
选择器
- 基本选择器
- 层次选择器
- - 后代选择器
  - 子选择器
  - 相邻兄弟选择器
  - 通用选择器
- 结构伪类选择器
- 属性选择器*
美化网页元素
- 字体样式
- 文本样式
- - 颜色
  - 文本排版
  - 文本阴影
- 超链接伪类
- 列表
- 背景
- 渐变
盒子模型box
- 边框
- 内外边距
- 圆角边框
- 阴影
浮动
- 文档流
- 父级边框塌陷的问题
定位
- 相对定位
- 绝对定位
- 固定定位
- z-index
动画

去源码之家，门户网站去进行下载，或者使用element-ui，飞冰ice.work

目前使用Less作为css语言替代器

Cascading Style Sheet 层叠级联样式表

css的初始化:

h1,ul,li,a,body{margin:0;padding:0;text-decoration:none;
}

美化网页

<head><!--编写CSS代码语法：选择器{声明1;声明2;声明3;}--><style>h1{ color:red; }</style>
</head>
<body><h1>  XXX  </h1>
</body>

以上代码进行CSS与HTML分离：建立文件夹css，并建立文件style.css文件

<head><link rel="stylesheet" href="css/style.css">
</head>
<body><h1>  XXX  </h1>
</body>

css/style.css：

/*注释*/
h1{ color:red; }

css优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利于SEO(Search Engine Optimization，搜索引擎优化)，容易被搜索引擎收录

CSS的导入方式

行内样式：在标签元素里面，编写该style属性，编写样式

内部样式：在head里面，编写该style属性，编写样式

外部样式：在.css文件里面，编写该style属性，编写样式

链接式：html标签：

导入式：css2.1特有的
<style> @import url("css/style.css")</style>

优先级：就近原则

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

1.标签选择器

会选择到页面所有的标签，例如：h1{ }

<head><style>h1{ color:red; }</style>
</head>
<body><h1>  XXX  </h1>
</body>

2.类选择器 class

好处：可以多个标签归类，是同一个class，可以复用；可以跨标签归类；可以进行写多个类名字例如：.class的名称{ }

<head><style>.xx{ color:red; }</style>
</head>
<body><h1 class="xx">X</h1><h1 class="xx">X</h1><p class="xx xx11 xx22">X</p><!--多个类名字-->
</body>

3.ID选择器

#id名称{ }，ID必须保证全局唯一。

<head><style>#id{ color:red; }</style>
</head>
<body><h1 id="xx">X</h1>
</body>

优先级：不遵循就近原则，ID选择器 > 类选择器 > 标签选择器

层次选择器

减少id和class的使用

后代选择器

在某个元素后面

body p{ background:red } /*对body后面的所有p标签进行操作*/
<p> p </p> /*进行操作*/
<li><p> p </p> /*进行操作*/</li>

子选择器

在某个元素后面的第一代才有

body>p{ background:red } /*对body后面的所有第一级p标签进行操作*/
<p> p </p> /*进行操作*/
<li><p> p </p> /*不进行操作*/</li>

相邻兄弟选择器

向下一个同辈，进行选择

.active + p{ background:red } /*对body后面的class是active的p标签之后的一个p标签进行操作*/
<p class = "active">p</p>
<p> p </p> /*进行兄弟选择器操作*/
<p> p </p> /*不进行操作*/
<li><p> p </p> /*不进行操作*/</li>

通用选择器

向下面所有同辈，进行选择

.active ~ p{ background:red } /*对body后面的class是active的p标签之后的一个p标签进行操作*/<p class = "active">p</p>
<p> p </p> /*进行通用选择器操作*/
<p> p </p> /*进行通用选择器操作*/
<li><p> p </p> /*不进行操作*/</li>

结构伪类选择器

伪类：条件；加一个过滤

<head><style> /*ul的第一个子元素*/ul li:first-child{  }/*ul的最后一个子元素*/ul li:last-child{  }/*选择p1，定位到父元集，选择当前第一个元素选择当前p元素的父级元素body，选中父级元素的第一个，并且是当前元素*/p : nth-child(1){  }/*选中父元素下的p元素的第二个，类型*/p : nth-of-type(2){  } /*鼠标移动到a标签进行高亮*/a.hover{ }</style>
</head>
<body><p> p1 </p> <!--body元素的第一个--><a href="">xx</a><ul><li><p> p </p> </li><!--ul的第一个子元素--><li><p> p </p> </li><li><p> p </p> </li></ul>
</body>

属性选择器*

对a标签存在id属性值为first的元素进行操作

a[id= first] {   }

对a标签存在id属性的元素进行操作

a[ id ] { }

[ 属性名 ] / [ 属性名 = 属性值(正则) ]

对a标签存在class属性的元素进行操作

a[ class ] { }

对于有多个属性值则使用*=，表示只有包含这个属性值就进行操作

<!--使用a[ class *= "link" ] {   } 可以对下列class包含link的元素进行操作-->
<a href="" class = "link item">xx</a>
<a href="" class = "link first">xx</a>

<!--使用a[ hred ^= http ] {   } 可以对下列href以http开头的元素进行操作-->
<a href="http:xx" class = "link item">xx</a>
<a href="http:xyy" class = "link first">xx</a><!--使用a[ hred $= y ] {   } 可以对下列href以y结尾的元素进行操作-->
<a href="http:xxy" class = "link item">xx</a>
<a href="http:xyy" class = "link first">xx</a>

美化网页元素

<span>突出文本的标签在css里面添加样式</span>

字体样式

<style>body{font-family: "Arial Black" ,楷体; /*字体，中文楷体，英文"Arial Black*/color:#a13d30;font-size:50px;font-wright:bolder;}p{font: oblique bolder 12px "楷体"}
</style>

font-family：字体

font-size：字体大小，xxpx：xx像素，xxem：xx个缩进(两个字)大小

font-wright：字体粗细，bolder，lighter，数值

font：样式粗细大小字体

文本样式

颜色

color：

单词(red)，

RGB{ #FF0000，rgb( 255,0,0）}，RGB：0-F

RGBA( rgba( 255, 0, 0, 0.5 ) )， RGBA的A：0-1

文本排版

位置：text-align：right，left，center

首行缩进：text-indent : 12em;

背景：background : #000000;

行高：line-height : 10px; ；和块的高度(height)一致就可以上下居中

下划线：text-decoration : underline;

中划线：text-decoration : line-through;

上划线：text-decoration : overline;

去掉a标签(超链接)的下划线：text-decoration : none;

文本对齐：vertical-align:middle;

<head><style>img,span{vertical-align:middle; /*center...*//*对齐要有参照物，字体对齐的参照物是img*/}</style></head>
<body><p><img src="xx.png" alt=""><span>asdsd<span> <!--asdsd与img对齐--></p>
</body>

文本阴影

text-shadow : h-shadow v-shadow blur color

水平位置垂直位置模糊距离(可选) 阴影颜色 (可选)

超链接伪类

进行对超链接修饰，link–visited–hover–active 按照顺序去写

<head><style>/*默认颜色*/a{text-decoration:none;color:#000000;}/*未访问的状态*/a.link{color:blue;}/*已访问的状态*/a.visited{color:red;}/*鼠标悬浮颜色*/a:hover{color:orange;font-size:10px;}/*鼠标按住未释放的状态*/a.active{color:green;}</style></head>
<body><p><a href ="#">xxx</a></p><p><a href ="#"><img src="xx.png" alt=""></a></p>
</body>

列表

ul li { }

list-style：

none：去掉原点
circle：空心圆
decimal：数字
square：正方形

text-indent:1em

背景

div{width:100px;height:100px;/*border:边框的大小  属性(实线，虚线)  颜色*/border: 1px solid red;/* background-image:背景是图片*/background-image:url("xx.jpg");/*background-repeat:平铺方式 repeat-x 水平铺 repeat-y 竖直铺 repeat 平铺(默认-重复设置图片进行铺满)  no-repeat 不平铺(只有一张图片)round 环绕*/background-repeat:repeat-x;/*可以进行放在一行：颜色，图片，图片位置，平铺方式*/background:red url("xx.jpg") 20px 10px no-repeat;
}

渐变

www.grabient.com/

background-image : 径向渐变，圆形渐变

盒子模型box

margin：外边距

padding：内边距

border：边框

盒子模型尺寸计算：border+margin+padding+内容元素

边框

/*border:边框的大小  属性(实线，虚线)  颜色*/
border: 1px solid red;
border: 1px dashed black;

内外边距

margin- 外边距， border- 边框， padding- 内边距：+

top，bottom，left，right，上下左右

margin：0; //上下左右一致

margin：0 auto ; //上下一致和左右一致，在div中使用外边距进行居中，前提是块元素有固定的宽度，或者在div中设置display:block。

有时候需要在在div中将margin：0 auto和text-align:center(内联元素居中)结合，将文本居中。简单来说就是要讲元素设置为div块元素。

margin：0 0 0; //上，左右，下分别写

margin：0 0 0 0; //上，右，下，左分别写

圆角边框

div{height:100px;border-radius:100px;/*上下左右的半径都是100px，可以使用百分比*/border-radius:100px  20px;/*左上右下的半径都是100px，左下右上的半径是20px*/border-radius:100px  20px  10px 5px;/*左上，右上，右下，左下，顺时针*/border-radius:100√2px;/*上下左右的半径都是高度的√2倍，此时为圆*/
}

圆圈：圆角 = 半径+边框

阴影

box-shadow: 10px 10px 100px yellow /*x  y 阴影半径 颜色 */

浮动

文档流

块级元素：独占一行

h1-h6，p，div，列表等等

行内元素：不独占一行

span，a，img，strong等等

行内元素可以被包含在块级元素中，反之不可以

display：设置元素状态，行内元素排列方式

block 块级元素
inline 行内元素
inline-block 块元素，但是可以内联，在一行，将块元素变成行元素，使之变成一行
none 没有

float:(left，right) ：浮动，独立于原来的背景。float的原始作用是为了实现文字环绕的作用，可以理解为部分脱离文档流。

clear:both：清除浮动效果，意味着这个盒子的顶边框将会低于在它之前的任何浮动盒子的底外边距，按照标准文档流进行顺序(向下)排版。

父级边框塌陷的问题

使用float会使元素进行浮动，但是父级边框会坍塌，浮动元素不在父级边框内。

解决方法：

增加父级元素的高度。固定高度时有限制。
浮动元素增加一个空的div标签，清除浮动。代码要避免空div。

.clear{claer:both;margin:0;padding:0;
}

overflow：隐藏多余元素，在父级元素进行添加。下拉的场景避免使用。

overflow:hidden：如果有高度，则超过高度的地方直接隐藏切掉。

overflow:scroll：添加滚动条

overflow:auto

**父类添加伪类：after。推荐使用。

/*在父类father之后操作*/
#father:after{content:'';/*添加一个空白内容==空的div*/display:block;/*将文本变为一个块*/clear:both;/*清除浮动*/
}

定位

相对定位

相对于原来的位置进行移动，元素设置此属性之后仍然处于文档流中，不影响其他元素布局。保留原来的位置。

position:relative;/*上下左右*/
top:-20px;/*向上移动，相对于其原来位置的顶部，向下移动-20px*/
left:20px;/*相对于其原来位置的顶部，向左移动20px*/
bottom：10px;/*相对于其原来位置的底部，向上移动10px*/
right:10xp;

绝对定位

没有父级元素的情况下，相对于浏览器定位。相对于父级定位时，在父级元素中添加相对定位，在父级范围内移动。相对于浏览器/父级位置进行移动，元素设置此属性之后不在文档流中，原来的位置不保留。

position:absolute;/*上下左右*/
top:-20px;
right:10xp;

固定定位

position:fixed;/*导航栏*/
bottom：10px;
right:10xp;

z-index

层级概念，默认为0，要浮现设置为999层。

opacity:0.5;/*背景透明度*/
filter:Alpha(opacity=50);/*IE8之前背景透明*/

动画

使用div进行对每一帧设置。

canvas动画库