web前端入门学习笔记——css基础(传智播客)

第二部分:CSS基础

1 Css概念

CSS 指层叠样式表 (Cascading StyleSheets)(级联样式表)

Css是用来美化html标签的,相当于页面化妆。

◆样式表书写位置

2  选择器

2.1  写法

选择器是一个选择谁(标签)的过程。

选择器{属性:值; 属性:值;}

属性                                                

解释

Width:20px;

Height:20px;

Background-color:red;

背景颜色

font-size:24px;

文字大小

text-align:left | center| right

内容的水平对齐方式

text-indent:2em;

首行缩进

Color:red;

文字颜色

 

 

3  选择器

3.1  基础选择器

◆标签选择器

标签{属性:值;}

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

★颜色的显示方式

  ◎直接写颜色的名称

  ◎十六进制显示颜色

  0-9 a-f

#000000; 前2为代表红色,中间2位代表绿色,后边2位代表蓝色。

  ◎rgb

  ◎rgba

A代表alpha 不透明度  值 0-1

 

◆类选择器(重点)

写法

.自定义类名{属性:值;  属性:值;}

特点: 谁调用,谁生效。

        一个标签可以调用多个类选择器。

如:<div class=”boxlsq”>

Class里面空格隔开,而不是用两次class=

       多个标签可以调用同一个类选择器。

  ★类选择器命名规则

   ◎不能用纯数字或者数字开头来定义类名

   ◎不能使用特殊符号或者特殊符号开头(_)来定义类名

   ◎不建议使用汉字来定义类名

   ◎不推荐使用属性或者属性的值来定义类名

◆ID选择器

写法

#自定义名称{属性:值;}

特点: 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上,不符合w3c规范,JS调用会出问题。

  一个标签只能调用一个ID选择器。

一个标签可以同时调用类选择器和ID选择器。

 

◆通配符选择器

*{属性:值;}

特点:给所有的标签都使用相同的样式。

★不推荐使用,增加浏览器和服务器负担。

3.2  复合选择器

概念:两个或者两个以上的基础选择器通过不同的方式连接在一起。

◆交集选择器

标签+类(ID)选择器{属性:值;}

特点:即要满足使用了某个标签,还要满足使用了类(id)选择器。

◆后代选择器(重点)

选择器+空格+选择器{属性:值;}

后代选择器首选要满足包含(嵌套)关系。

父集元素在前边,子集元素在后边。

特点:无限制隔代。

      只要能代表标签,标签、类选择器、ID选择器自由组合。

◆子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素。

◆并集选择器

选择器+,+选择器+,选择器{属性:值;}

4  文本元素

4.1     属性

font-size:16px;  文字大小

Font-weight: 700      ;   值从100-900,文字粗细,不推荐使用font-weight:bold;

Font-family:微软雅黑文本的字体

Font-style: normal | italic;     normal 默认值  italic  斜体

line-height: 行高

4.2  文本属性连写

font: font-stylefont-weight  font-size/line-height  font-family;

◆:注意:font:后边写属性的值。一定按照书写顺序。

      文本属性连写文字大小和字体为必写项

Font:italic 70016px/40px  微软雅黑;

4.3  文字的表达方式

◆直接写中文名称。

◆写字体的英文名称。

◆unicode 编码

 

第一步:f12

第二步:找到console

第三步:输入escape(“宋体”)  注意英文的括号和双引号。

 

 

 

5  样式表书写位置

◆内嵌式写法

<head>

<style type=”text/css”>

样式表写法

</style>

</head>

◆外链式写法

写在head里,<link rel=”stylesheet” href=”1.css”>

◆行内样式表

 

◆三种写法特点:

★内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。

★外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。

★行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。  (不推荐使用)

6  标签分类(显示方式)

6.1  块元素

典型代表,Div,h1-h6,p,ul,li

特点: ★独占一行

      ★可以设置宽高

     ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

6.2  行内元素

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

特点:★在一行上显示

      ★不能直接设置宽高

      ★元素的宽和高就是内容撑开的宽高。

6.3  行内块元素(内联元素)

典型代表  input  img

特点:★在一行上显示

      ★可以设置宽高     

 

6.4  块元素、行内元素

◆块元素转行内元素

display:inline;

◆行内元素转块元素

display:block;

◆块和行内元素转行内块元素

display:inline-block;

 

7  css三大特性

7.1  层叠性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

 

7.2   继承性

   继承性发生的前提是包含(嵌套关系)

   ★文字颜色可以继承

   ★文字大小可以继承

   ★字体可以继续

   ★字体粗细可以继承

   ★文字风格可以继承

   ★行高可以继承

   总结:文字的所有属性都可以继承

◆特殊情况:

h系列不能继承文字大小。

a标签不能继承文字颜色。

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

         0         1          10    100      1000      1000以上

     

◆优先级特点

★继承的权重为0

★权重会叠加

8  链接伪类

a:link{属性:值;}  a{属性:值}效果是一样的。

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

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

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

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

8.1  文本修饰

text-decoration: none  |   underline 下划线  |     line-through删除线

9  背景属性

9.1  background-color     背景颜色

9.2  background-image    背景图片

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

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

★方位值只写一个的时候,另外一个值默认居中。

★写2个方位值的时候,顺序没有要求。

★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

9.5  Background-attachment   背景是否滚动  scroll  |  fixed

9.6  背景属性连写

★:连写的时候没有顺序要求,url为必写项。

 

 

 

 

 

10  行高

◆浏览器默认文字大小

浏览器默认文字大小:16px

行高:是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候,垂直居中显示。

10.1   行高的单位

 

行高单位

文字大小

20px

20px

20px

2em

20px

40px

150%

20px

30px

2

20px

40px

 

总结:单位除了像素以外,行高都是与文字大小乘积。

行高单位

父元素文字大小

子元素文字大小

行高

40px

20px

30px

40px

2em

20px

30px

40px

150%

20px

30px

30px

2

20px

30px

60px

总结:不带单位时,行高是和子元素文字大小相乘,em%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。

◆推荐行高使用像素为单位。

11  盒子模型

11.1   边框  border

Border-top-style:  solid   实线

               dotted  点线

               dashed  虚线

Border-top-color   边框颜色

Border-top-width   边框粗细

边框属性的连写 

特点:没有顺序要求,线型为必写项。

◆四个边框值相同的写法

特点:没有顺序要求,线型为必写项。

11.2   边框合并   border-collapse:collapse;如在做细线表格就可一键搞定。

11.3   获取焦点

label for  id      获取光标焦点

11.4   内边距

Padding-left   |  right    |  top  |  bottom

 

◆padding连写

Padding: 20px;   上右下左内边距都是20px

Padding: 20px 30px;   上下20px   左右30px

Padding: 20px  30px 40px;   上内边距为20px  左右内边距为30px   下内边距为40

Padding:  20px 30px   40px  50px;  20px 30px  40px    50px

内边距撑大盒子的问题

影响盒子宽度的因素

内边距影响盒子的宽度

边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

◆继承的盒子一般不会被撑大

包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

11.5   外边距

margin-left   | right |  top  | bottom

◆外边距连写

Margin: 20px;    上下左右外边距20PX

Margin: 20px30px;   上下20px  左右30px

Margin: 20px  30px 40px;     上20px  左右30px   下  40px

Margin: 20px  30px  40px  50px; 上20px   右30px   下40px  左50px

垂直方向外边距合并

两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框

           2给父盒子overflow:hidden;   bfc   格式化上下文

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

行内元素可以定义左右的内外边距,上下会被忽略掉。

  行内块可以定义内外边距。

12  Fireworks的基本使用

新建文件   ctrl+n

打开文件  ctrl+o

调出和隐藏标尺 ctrl+r

显示辅助线:从标尺里面往外拉,就会显示辅助线了。拖回去就会消失

清除辅助线:  视图---辅助线----清除辅助线

放大镜  z   放大镜状态下alt+鼠标左键 缩小

抓手   快捷键   空格

测量距离      ★先拉出2根辅助线

              ★切换到指针工具

              ★将光标放到2根辅助线之间,按住shift

取颜色:

点开左下取色工具,移动鼠标位置,即取出移动到的位置的颜色,有十六进制和RGB颜色

13   文档流(标准流)

元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。

14   浮动布局

float:  left   |  right

特点:

元素浮动之后不占据原来的位置(脱标),下一个会占据这个元素的位置(位于下方)

★浮动的盒子在一行上显示

★行内元素浮动之后转换为行内块元素。(不推荐使用,转行内元素最好使用display:inline-block;)

14.1   浮动的作用

◆文本绕图(本来就是为了解决这个问题,故文字不会跑到图片下面,所以才能实现文本绕图。)

◆制作导航

◆网页布局

15   清除浮动

使用目的:既不给父盒子设置高度(因为有的高度不清楚),又要使下面的盒子不会被上面父盒子中浮动的盒子覆盖。)

当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误。

◆清除浮动不是不用浮动,清除浮动产生的不利影响。

◆清除浮动的方法

clear: left  | right  | both

工作里用的最多的是clear:both;

★额外标签法

 在最后一个浮动元素后添加标签<div style=”clear:both”></div>

给父集元素使用overflow:hidden;    bfc

  如果有内容出了盒子,不能使用这个方法。

★伪元素清除浮动  推荐使用

 

16CSS初始化(设默认值)

为了考虑浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化,往往会出现浏览器之间的页面差异。所以,编写网页的第一步应该是先初始化,使不同浏览器呈现的页面效果是一样的。

腾讯:

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px"宋体","ArialNarrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}

a{color:#2d374b;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

 

 

新浪:

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}

body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-family:"SimSun","宋体","ArialNarrow";}

ul,ol{list-style-type:none;}

select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}

a:link{color:#009;}

a:visited{color:#800080;}

a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝:

body, h1, h2, h3, h4, h5,h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select,textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%;}

address, cite, dfn, em, var{ font-style:normal; }

code, kbd, pre, samp {font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover {text-decoration:underline; }

sup {vertical-align:text-top; }

sub{vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select,textarea { font-size:100%; }

table {border-collapse:collapse; border-spacing:0; }

17    Overflow溢出

 

18   定位

定位方向: left  | right | top  | bottom

position:static;  静态定位。默认值,就是文档流。

◆绝对定位

Position:absolute;

Left/right/top/bottom:30px;

特点:

★元素使用绝对定位之后不占据原来的位置(脱标


★元素使用绝对定位,位置是从浏览器出发。

 

嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。

★嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;)

调整元素的层叠顺序:属性

z-index:2;后面的值越大,越在上面。可设置0:999.用于元素被覆盖时使用

◆相对定位

Position: relative;

特点:

★使用相对定位,位置从自身出发(left:20px表示据原来的定位左边差20,即往右走20px.)。

★还占据原来的位置。

子绝父相(父元素相对定位,子元素绝对定位)工作中用的最多

可以保证父元素不脱标。

★行内元素使用相对定位不能转行内块

◆固定定位(不随浏览器滚动而消失,如导航栏)

Position:fixed;

特点:

★固定定位之后,不占据原来的位置(脱标

★元素使用固定定位之后,位置从浏览器出发。

★元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;)

 

 

定位的盒子居中显示

:margin:0auto;  盒子居中,只能让标准流的盒子居中对齐。

(text-align 是内容的对齐方式)

★定位的盒子居中:先左/右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值。)

19      标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p,div等标签。

◆行内元素尽量包含行内元素,行内元素不要包含块元素

详细的包含规范见下图

flow:所有的文档流,即块元素、行内元素

 

 

 

20       规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

 规避浮动和定位的一个小方法:同理margin:0 auto;为盒子居中

21       图片和文字垂直居中对齐

vertical-align垂直对齐,对inline-block最敏感。默认属性是:vertical-align:baseline;

 

 

更详细的可看一个个人网站:www.zhangxinxu.com

 

22       Css可见性

overflow:hidden;   溢出隐藏    当内容出了盒子之外就隐藏。

结合锚点使用,可用于鼠标放置显示,移开不显示

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

Display:block;     元素可见

Display:none  display:block  ;常配合js使用。

       css之内容移除(网页优化)

◆使用text-indent:-5000em;

 

◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。

 

       Css精灵图

 

 

10      属性选择器

选中标签及其属性

 

23           emmet快捷键:

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

 12    html:

12.1   生成结构的快捷键:

!+ tab,可以生成html5的结构代码。

12.2   生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

12.3   生成同级元素:

标签名+标签名+标签名 “+”tab

12.4   生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

12.5   带固定数量的标签:

                     ul>li*5+tab

12.6   带有序号名称   

ul>li.abc$*3 +tab

12.7   生成带有内容的标签:

ul>li>a{item}*5

 13    css

              width:30px==>w30+tab

  Height:30px==>h30+tab

  Margin:30px==>mg30+tab

Padding:30px==>pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab

阅读更多
文章标签: web前端 css web开发
个人分类: Web开发前端基础
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭