CSS笔记

7-04 157 views

1、css的四种引入方式

行内式:style="样式"

没有体现出CSS的优势,不推荐使用

 

内嵌式:<head>

<style type='text/css'>样式</style>

</head>

缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

 

导入式:<head>

<style type='text/css'>

@import"css文件路径";

</style>

</head>

导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

 

链接式:<head>

<link href='css文件路径' rel='stylesheet' type='text/css'>

</head>

用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

 

总结:一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

 

 

2、选择器

基础选择器

标签选择器——标签名{属性1:值1,属性2:值2,...} 例如:div{}

类选择器——.类名{属性1:值1,属性2:值2,...} 例如:.nav{}

ID选择器——#ID{属性1:值1,属性2:值2,...} 例如:#myform{}

通配符选择器——*{属性1:值1,属性2:值2,...} 例如:*{}

属性选择器——input[属性=值]{属性1:值1,属性2:值2,...} 例如:input[type=text]{}

 

复合选择器

并集选择器——选择器+','+选择器+','+选择器{属性1:值1,属性2:值2,...} 例如:div,#class,.span{}

交集选择器——标签+类(ID)选择器{属性1:值1,属性2:值2,...} 例如:div.test{}

子代选择器——选择器+'>'+选择器{属性1:值1,属性2:值2,...} 例如:div>span{}

后代选择器——选择器+空格+选择器{属性1:值1,属性2:值2,...} 例如:div span{}

 

 

3、文本元素

属性:

font-style:normal|italic;   文字类型,normal 默认值 | italic  斜体

font-weight:700; 文字粗细,100-700

font-size:10px; 文字大小

line-height:40px; 文字行高

font-family:微软雅黑; 文字字体

font:italic 700 10px/40px 微软雅黑;

 

text-decoration:none|underline|line-through 文本修饰

 

文字表达方式:font-family:中文名称/英文名称/unicode编码(可在console台直接输入escape('中文名称')获取)

4、标签分类(显示方式)

块状元素

典型代表:div,h1-h6,p,ul,li

特点:独占一行、可以设置宽高

 

行内元素

典型代表:span,a,strong,em,del,ins

特点:在一行上显示、不能直接设置宽高、元素的宽高就是内容撑开的宽高

 

行内块元素(内联元素)

典型代表:input,img

特点:在一行上显示、可以设置宽高

 

转块状元素/行内元素/行内块元素

display:block/inline/inline-bolck

 

5、css三大特性

层叠性:后边代码层叠前边代码

继承性:前提是包含(嵌套关系)

优先级:默认样式<标签选择器<类选择器<id选择器<行内样式<!important

 

6、链接伪类

a:link{属性:值} 链接默认状态

a:visited{属性:值} 链接访问后的状态

a:hover{属性:值} 鼠标放到链接上显示的状态

a:active{属性:值} 链接激活的状态

:focus{属性:值} 获取焦点

 

7、背景属性

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺 repeat(默认)|no-repeat|repeat-x|repeat-y

background-position 背景定位 left|right|center|top|bottom

background-attachment 背景滚动 scroll|fixed

 

属性连写:没有顺序要求,url为必写项

 

8、盒子模型:border/padding/margin

border——边框

border-style 边框类型 solid(线性)|dotted(点型)|dashed(虚线)

border-color 边框颜色

border-width 边框粗细

连写:border:12px solid red

 

border-collapse:collapse 边框合并

 

padding——内边距

margin——外边距

连写顺序:上右下左,顺时针方向 如:padding:10px 20px 30px 40px

 

9、浮动布局

作用:文本绕图、制作导航、网页布局

设置:float:left|right

清除:clear:left|right|both

 

10、溢出处理:overflow

visible:默认值,内容不会被修剪,会呈现在元素之外

hidden:内容会被修剪,并且其余内容是不可见的

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容

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

 

11、定位

静态定位:默认值,文档流

postition:static;

 

绝对定位

position:absolute;

 

相对定位

position:relative;

 

固定定位

position:fixed;

欢迎留言