css学习笔记

发表于 | 分类于
| 字数统计: 4.3k 字

层叠样式表(Cascading Style Sheets，缩写为 CSS）:用于控制网页样式,实现网页表现与内容分离,布局和美化网页
一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”.

css引入方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 行内/内联样式 -->
<p style="color:#FF0000">行内样式</p>
<!-- 内部/内嵌样式(常写在head中) -->
<style type="text/css">
/*css注释*/
h1{color:red;}
</style>
<!-- 外部样式 -->
<link href="1.css" type="text/css" rel="stylesheet" />
<!-- 注:rel  当前文档与被链接文档之间的关系 -->
<!-- 导入样式 -->
<style type="text/css">
@import "1.css"; /*最好写法  @import url(1.css)*/
</style>
注:link和import区别
a.link 不仅可以加载css可以加载其他文件 而import只能加载css
b.import页面加载完后才会加载样式
c.link无兼容性问题 import不兼容低版本

css语法

1
2
3
4
    属性  值     属性   值
h1{color:red;font-size:14px;}
选择器   声明1    声明2
1em约等于16px    网页中默认的字体大小为16px

css选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1. ID选择器       #one{width:100px;height:100px;}
2. class选择器    .one{width:100px;height:100px;}
3. 标签选择器     p{width:100px;height:100px;}
4. 混合选择器     把选择的元素描述的越详细越好
5. 属性选择器     div[id]{color:red}
6. 后代选择器     div li{color:red} div所有后代li元素
7. 直接子元素选择器   h1>p{color:red;}
注:只针对h1下的直接子元素,第三代不影响 IE6不兼容
8. 相邻兄弟选择器
  h1+p{color:red;}  只会影响相邻兄弟元素后面的不会影响前面的
  h1~p{color:red;}  选择紧随其后的所有兄弟元素
9. 伪类
  a:link{color:black;}      未访问的链接
  a:visited{color:pink;}    已访问的链接
  a:hover{color:red;}       鼠标移动到链接上
  a:active{color:yellow;}   鼠标点击之后
  注:IE6不支持a以外其他任何标签的伪类 伪类顺序 lvha
  a:link,a:visited{text-decoration:none;}
  a:hover,a:focus;a:active{text-decoration:underline;}
10. 伪元素
  :before/:after       在元素的前面或后面添加内容 配合content
  table:after { content: "end --table"; }
  :first-letter        对象内的第一个字符样式
  :first-line          对象内第一行的样式
  :not(.tew){}         除了class为tew之外

css优先级

1
2
3
4
!important>js>行内样式>ID>Class>标签>继承>通配符
行内样式>内嵌样式>外联样式(就近原则)
注:宽度 高度使用数值百分比时,确保父元素有宽高度
!important   提升指定样式的优先级     p{color:red!important;}

css背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
background  背景属性
background  背景复合样式:颜色 路径 重复 位置(用几个写几个)/大小 固定
backgournd:#00ff00 url('images/1.jpg') no-repeat top right;
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
background-color:red;    背景颜色
background-image:url()   背景图片
background-repeat:no-repeat   不重复
	repeat      可以重复出现(默认)
	repeat-x    只能水平方向平铺
	repeat-y    只能垂直方向平铺
background-attachment:fixed   固定背景图片不随页面滚动  scroll  不固定(默认)
background-position:X Y  设置背景图片位置(定位背景图片)
	X/Y 各有五个值top bottom left center right
	只写一个第二个默认为center还可以是具体数值
background-size:cover或100% 100%  背景图片大小(不能写在复合样式里)
	cover按一边的比例放大     缩放使背景全部占满盒子
注:在使用background-image之前必须为元素添加宽高度(背景不占位置空间)

css文本属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
a.字体风格   font-family:黑体;
b.字体大小   font-size:12px;
c.文字颜色   font-color:red;
d.文字粗细   font-weight:blod/normal
e.文字修饰   text-decoration:underline/line-through/overline/none/blink
f.文本对齐   text-align:left/right/justify(两端对齐)/center(文字水平方向居中)
注:text-align:center   只针对行间元素有效(文字和图片)
g.首行缩进   text-indent:2em  两个字体单位  字体大小改变位置不变
h.行间据行高 line-height:n    文字一行显示的位置,和容器高相同文字垂直方向居中显示
i.字符间距   letter-spacing:n 字符和汉字都一样 单个字符,字母间距
j.词间距     word-spacing:n   单词,词语间距,注意以空格分割才识别
k.转换大小写 text-transform:capitalize(每个单词首字母大写)
			uppercase(每个字母都转成大写)
			lowercase(每个字母都转成小写)
l.文字样式   font-style:normal italic  bold
m.文本省略   overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
n.文本折行   word-wrap: break-word （是否保留单词换行）
	    word-break: break-all 设定保留的单位是 字  句子 单词 （针对多字节文字是否换行）
	    white-space:nowrap  禁止换行 （空白处是否断行）
o.元素垂直对齐 vertical-align: baseline(默认值) top middle bottom
注： vertical-align只能应用于内联元以及 display 值为 table-cell 的元素。
注:  font: italic bold  16px/400px  微软雅黑;
     font: font-style|font-weight|font-size/line-height|font-family
     复合写法 样式  粗细  大小/行高   风格
行高的测量方式:  先确定文字字体大小,多行文字之间的距离/2(即上下边距) 当行高为奇数时文字上方要比下方
少一个像素,得出文字的行高.
哪些属性可以继承？
color、text-开头的、line-开头的、font-开头的。所有关于盒子的、定位的、布局的属性都不能继承。
CSS中可以继承的属性如下：
1）文本相关属性：font-family、font-size、font-style、font-variant, font-weight、font、
letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing、color；
2）列表相关属性：list-style-image、list-style-position、list-style-type、list-style；
3）表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；
4）其他属性：Cursor、visibility。

css盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
margin  隔开元素与外面(外边距)
padding 隔开元素与边框(内边距)
注:width 和 height只能设置盒子中内容的宽度和高度,盒子实际的宽度和高度应该加上
border 和 padding
border  边框属性
border  边框复合样式  边框线粗细  边框线风格  边框线颜色
border:5px  solid   blue;
边框样式风格  solid 实线 dashed  虚线 dotted  点状线  double 双线  grove    3D(相框效果)
单独定义某个边宽度或样式或颜色
border-top:上边框 border-bottom:下边框 border-left:左边框 border-right:右边框
border-top-color:transparent;  上边框透明
border-top-width:10px;         上边框宽度
border-top-style:dashed;       上边框为虚线
注:border-color:不是一个值时不能写在复合样式里且必须放在border-style之前先获得
边框在设置颜色后面可以有四个颜色值 没有设置border-color的时候会默认使用文字color的颜色作为边框颜色
margin  外边距   外边距的负值  可以增加元素的宽度
margin:0 auto;         /*设置元素水平居中*/
margin:3px;            /*上下左右都是3px*/
margin:3px 5px;        /*上下3px 左右5px*/
margin:3px 5px 10px    /*上3px 左右5px 下10px*/
margin:3px 5px 2px 8px /*上3px 右5px 下2px 左8px*/
padding 内边距
外边距的合并:当两个垂直外边距相遇时,外边距会进行合并(取最大者)
外边距的传递(塌陷):当子元素与父元素之间没有任何间距隔开的时候子级元素的margin-top会传递给父级
加上边框则不会传递或者给父级添加上内边距padding-top
outline  轮廓   就是是出现在文字/图片链接,input,button元素周围的虚线边框
注:1.a,input,button{outline:none;}  img{border:none}
2.${a,input,buuton}.focus(function(){this.blur()})

display属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a. 块级元素(display:block)
  1.占据一行,后面元素换行显示    可以放任何内容
  2.可控制宽高 上下边距(支持所有css命令)  常见的有 div h1-h6 p hr ul ol dl
  3.没有宽度时,默认撑满一排
  注: 有些块元素不可以包含另一些块元素 例如块级元素不能放在p里面 它会先结束自己将其他标签解析到外面去

b. 行内元素(dispaly:inline)
  1.不会独占一行,元素并排显示    不能放块级元素(a除外)
  2.不支持width height line-height无效  margin padding上下无效
  3.宽度，背景颜色由内容撑开    常见 b span font img input a label strong em
  4.代码换行被解析  默认垂直位置为vertical-align:baseline
  5.行内元素与文字的垂直居中    vertical-align:middle
  6.高度会继承父级的字体大小会高出一部分  使用font-size:0 清除
display用来设置元素的显示方式
display:block;  块级元素显示
display:inline; 行内元素显示
display:inline-block;行间块级元素 以块级元素样式展示以行级元素样式排列
  1.块在一行显示
  2.行内属性标签支持宽高
  3.没有宽度时,内容撑开宽度
  4.标签之间换行间隙被解析(问题)
  5.ie6,ie7不支持块标签的inline-block(问题)
间隙问题：父级字体设为0，自己重新设字体  无缝衔接，不换行
display:none;将隐藏指定元素及其子元素的显示 位置不保留
c. 行内块元素

position定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1. fixed  固定定位  位置固定在窗口的某个位置,不管滚动条如何拖动位置不改变,脱离文档流漂浮起来原来所占空间删除相对于浏览器窗口定位
ex  position:fixed;left:200px;top:200px;
2. relative  相对定位 元素相对于他的起点进行移动 仍处于文档流中,其所占位置空间依然存在  提升层级
ex position:relative;left:200px;top:200px;
3. absolute 绝对定位  精准定位元素在页面的位置,脱离文档流漂浮起来原来所占空间删除
ex position:absolute;left:-20px;top:150px;
注: clip:rect(上右下左)    裁剪absolute绝对定位元素框
绝对定位元素它的参照物是离最近已定位的非static定位的祖先元素如果没有则相对于body定位
绝对定位的元素的left,top等是不包括父级的border宽度
4. z-index  层级定位  改变层叠的先后顺序  z-index:n   值越大,越在上面(仅能在定位元素上有效)
5. static 静态定位(解除定位)  用JS JQ改变样式属性值或hover鼠标 把定位修改为不定位,改变为static之后 left top z-index都不生效了
6. 盒子有两种方式存在于浏览器中
a.绘制在画板上(static,relative)
b.漂浮在画板上(absolute,fixed)
注:在定位的时候 如果没有设置方向 默认就是top:0px;left:0px(左上优先于右下)
    absolute绝对定位元素和fixed固定定位元素  块元素宽度不会继承父级宽度而是由内容撑开
    绝对定位元素具有自动伸缩的特性 除非自己指定宽度
根据第一个高级特性，我们可以衍生出第二个高级特性，由于绝对行为元素具有自动伸缩的功能，如果width值为auto
此时如果我们设置 left 和 right 都为0，则该元素会填充满其相对的元素，如果此时我们将宽度设置为固定值，这是
绝对定位元素会优先取 left 值作为定位标志（这个标准适用于从左向右读的文档流中，而在少数从右往左读的文档中，
则优先取 right）。如果这时我们将 margin 设置为auto,则绝对定位元素会呈现居中状态；其实垂直方向的作用效果是
一样，垂直方向同样可以自动拉伸水平居中有一点不同的是，无论 top 和 bottom 的值设置为多少，只要相等，就可以
垂直居中。

float浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 浮动的框可以向左向右浮动直到它的外边缘碰到包含框或另一个浮动匡为止,设定浮动之后
它就不会占据原来的空间,改变正常的文档流排列,影响到周围的元素,控制元素在同层里左浮或右浮
特征:  1.改变元素为块级   2.脱离文档流   3.提升层级半级	 */
{float:left/right     向左或向右浮动}
/* 如果包含框太窄,无法容纳水平排列的浮动元素,那么其他浮动元素会下移直到有足够空间(宽度不够)  */
/* 如果浮动元素的高度不同,那么当他们向下浮动时可能被其他浮动元素卡住(高度过高) */
清除浮动    不希望原来的空间被其他元素占据相当于换行
1. 在其后面设置一个清除浮动的div 设置css样式 clear:both
2. 给父级定义高度(只适合高度固定的布局中)拓展不好
3. 给父级元素设置overflow：hidden（拓展不好）
4. after 伪类 清浮动方法 在需要清除浮动的父容器添加类名为clearfix
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}
浮动的性质：脱标、贴边、字围、收缩。
注: 盒子一旦用了flaot:left/right  position:absolute/fixed 会隐式改变display为行内块元素
position:absolute/fixed 绝对定位/固定定位元素子级的浮动可以不用写清除浮动方法

其他CSS属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*  溢出隐藏  */
{
overflow:visible  内容都会显示
	hidden   超出(溢出)隐藏
	auto     只有超出才显示滚动条
	scroll   无论溢出与否都显示滚动条
}
/*  可见属性  */
{
visiblity:hidden/visible;
display:  none/block
注:使用display设置的不可见区域所占位置也一起隐藏,而使用visiblty属性设置的不可见
区域所占位置保留只是元素不可见
}
/* opacity透明 */
对于IE6/7/8  使用filter:alpha(opacity=0-100)
对于webkit,opera,firefox,IE9+,使用opacity:值0-1
对于早期火狐 使用-moz-opacity:值0-1
兼容写法
{ opacity:.5;filter:alpha(opacity=50);-moz-opacity:.5; }
/* 文本溢出 */
{ text-overflow: clip:文本被修剪    /    ellipse:显示省略号代表被修剪的文本  }
/* 鼠标样式 */
{ cursor:pointer/move/help;cursor:url(arrow.cur),pointer; }

CSS列表属性

1
2
3
4
简写list-style:none;  去除列表前的小圆点
a.list-style-image:url();      //列表项前面的图像
b.list-style-position:outside/inside; //列表项目标记放置在文本以外(默认)
c.list-style-type:none/square/circle/disc  //列表修饰符类型

CSS hack

1
2
3
4
5
6
7
8
9
针对不同浏览器写不同css样式的过程,就叫做css hack
\9  所有IE10及IE10之前  background-color:blue\9;
*   IE7及IE7以下        *background-color:green;
_   IE6及IE6以下        _background-color:pink;
+   IE6及IE7            +background-color:pink;
书写顺序   background-color:red;
	background-color:blue\9;
	*background-color:green;
	_background-color:pink;

其他

  • 响应式设计和布局的方法 1.隐藏不重要的部分 2.折行 3.自适应空间
  • 将css放在页头在载人HTML元素之前,先载入他们的样式,可以避免HTML出现无样式状态
  • 将javascript放在页尾,先将网页呈现给用户,再来加载页面的脚本,避免javascript阻塞网页的呈现
    减少页面空白的时间.
  • 同时执行两个点击事件的方法 采用事件监听机制
  • 自定义标签默认是行内元素 zoom 触发haslayout
  • ico 标题栏图标 png图片 找ico转换工具即可
    <link rel="shortcut icon" href="./img/100du.ico" />
  • 圆角的测量方法 选择–>修改–>平滑–>调节即可

前端常见问题

1.图片做超链接时IE下蓝色边框问题 img{border:none;})
2.超链接在IE下被点击时出现的轮廓问题 a,input,textarea{outline:none;}
3.表单元素水平对齐 用定位或浮动
4.去除按钮默认样式 border:none
5.阿里图标库 http://www.iconfont.cn 找到所有要用的图标库然后把生成的文件把之前的全部覆盖
6.背景透明 文字不透明 采用绝对定位 把文字图层和背景透明图层叠在一起
7.禁用文本框的缩放 textarea{resize:none}
8.两端对齐 最外层套一个盒子 宽度较宽 最外层父级采用溢出隐藏
9.抽屉式效果最后一个元素掉下去解决办法是 给他定位
10.最小宽度解决pc段项目屏幕缩小浮动元素掉下去的问题

垂直居中

1
2
3
4
5
6
1.父元素高度不确定的文本,图片,块级元素的垂直居中
   方法  通过给父容器设置相同上下边距实现的
2.父元素高度确定的单行文本的垂直居中
   方法  给父元素设置line-height和height高度值相同来实现
3.父元素高度确定的多行文本,图片,块级元素的垂直居中
   方法  使用vertical-align:middle  display:tab-cell
-------------本文结束感谢您的阅读-------------
0%