html+css 技巧

3、css定义的技巧:
【1】、为了将来的css代码优化,建议所有的属性上要带上“;”

【2】、某些html 标签,有自己默认的css属性值,
       例如h1 标签就有自己的属性值,自动就是加粗显示。字号比较大。

【3】、为了兼容主流浏览器,为了统一,建议我们在建设是,将所有元素的css 属性,重置为标准         的。
【4】、不同的浏览器,有各自不同的css属性值----要命的,就是浏览器的兼容。

【5】、就一个比较特殊的字体想用,怎么办?--将其转换为图片。
       分中英文字体。设置字体的顺序。将英文字体设置在前,中文在后。

【6】、css 编辑工具--用什么都可以,高手,用树叶杀人

【7】、我们使用95%的css,都是最常用的属性

【8】、想让文字在垂直方向上,居中,将行高设置为,元素的高度,行高=元素的高度
      (line-height=height)
       *******文字的内容不能超过,元素的宽度,也就是不能换行。

【9】、css可以重置新设置,html 标签的默认样式。
---------------------------------------------------------------------------------------------

4、css 应用给网页的方式,就相当于,给人怎么去穿上衣服。
【1】、行内样式:应用于一个。
【2】、嵌入样式:应用于一类标签
【3】、如果我们有很多的网页,都要用css,将这些css 写到一个独立文件中,这个就是外链
       式,推荐使用

【4】、导入试样式:也就是将样式写到一个文件中,再倒入到网页中,
      *****说明,导入试,其实与内嵌式是相类似的,都是将样式加入到网页里。
       1、导入试,会占用html 文件空间
       2、有些浏览器,解析会有问题。浏览器会,最后读取 @import 中内容
----------------------------------------------------------------------------------------------

二、css 选择符
 1、什么选择符?就是你要控制的对象
 2、选择符的分类:
 【1】、标签选择符---针对html 标签
 【2】、ID选择符---针对某一个id
 【3】、类选择符---针对某一类,或者某一些元素,他们的样式是相同的。
         *****同一个元素,应用多个类,类与类名之间用空格分隔

三、css 的特性
css叫层叠样式表
1、继承:子元素会继承父元素的某些样式。
          【因为有些子元素本身就有默认值,所以它就不用父元素】

2、层叠:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。

--------------------------------------------------------------------------------------------

五、常用的一些文字,文本控制的css样式
*****我们在应用css样式时,一定要注意他的默认值。因为不同的浏览器它的css默认值是不同的
 演示这个例子:目的,不同的属性,浏览器支持是不一样,我们还要保证我们网页的兼容性?
   尽量使用通用属性,不用存在兼容性差别的属性。


六、css 控制元素的某种状态---伪类

伪类语法:
元素名称:伪类名称{属性:值}

例如:超链接的,鼠标经过状态

a:hover{text-decoration:underline;}

*****如果,鼠标放上效果不起作用,请修改连接状态的顺序 L-V-H-A

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}      /* 已访问的链接 */
a:hover {color: #FF00FF}        /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}       /* 被选择的链接 */
-------------------------------------------------------------------------------------


css 高级应用

二、css 选择符:
css选择符作用?制定css样式所有对象(范围)

1、标签选择符:针对html 标签
2、id选择符:针对页面只出现一次的内容,id
3、类选择符:针对某些元素,相同的样式,重复样式

******默认情况某些html 元素本身有自己的默认值

4、控制所有元素-----使用通配符---*

通配选择符: *{属性:值},用于定义所有html元素
********的作用范围很广,但是,它的效率最低。慎用

  *{margin:0;padding:0;}//重置所有元素的,外边距与内边距,为零
---------------------------------------------------------------------------------------

三、css 盒子模型

*******一个盒子是由以下几部分构成的:

1、盒子中的内容 content
2、盒子的边框 border
3、盒子的边框与内容之间的距离,称为填充--padding,内边距(内补丁)
4、多个盒子存在,盒子与盒子之间的距离,称为边界---margin,外边距(外补丁)

******就是盒子所在的实际宽度为例=左右边界 + 左右边框 + 左右内填充 + 内容宽度

 
******css盒子的相关属性:
【1】、内容属性:内容本身的宽=width,内容本身的高=height
【2】、内填充属性:内容与边界之间的距离,padding
 *****再定义盒子的宽度时,要考虑到,内填充,边框,边界的存在
 如果,增加了内填充了,整个盒子宽度值,要再减去,你增加的,内填充值。

小盒子的上面=20 右面 30 下面50 左面100 外边界

margin:20 30 50 100;

margin-top:
margin-right:
margin-bottom:
margin-left:

*****将来在使用外边距,要注意浏览器兼容性。
***** 除了值为0的情况下,所有的非零的值,后面都要加单位。

*****由于各个浏览器存在着,内外边距的,默认值,还不同。
我们需要将所有浏览器的默认内外边距,都从零开始计算。

在实际工作中,不要这个  *{margin:0;padding:0;},因为效率最低
所以我们是用到了哪些元素,就把哪些元素的默认值,归零。

css 的属性,虽然有继承的特点,但是,并不是,所有的属性都有继承。

*****css 小技巧:
【1】、让盒子,水平居中。将对象的左右外边界,设置auto;
【2】、让盒子中的内容,垂直居中,设置行高=盒子的高度,但是不要有换行。
【3】、我们在调试的时候,可以适当加背景颜色。

边框属性的说明:

css 语法:
border:border-width || border-style || border-color

根据语法,推理出它的使用方法

如果只写 border,则后面要跟着的是,三个不同的自属性,第一个 粗细  第二个 样式  第三个 颜色
border:2px solid blue
border: 2px solid blue

关于列表的属性介绍:---存在兼容性问题

list-style:列表的图片

语法:
list-style: list-style-image || list-style-position || list-style-type

列表的样式:列表的图片  列表的符号位置  列表的样式

list-style:none 不要列表的符号(一般这么使用,避免浏览器的兼容性带来的问题)


******html 元素的分类:块与内联

背景图片,默认情况下是进行水平与垂直方向上的平铺。
默认背景图片,在元素的左上角显示。
背景图片的衣服方式:固定的含义是,将图片固定在,屏幕(可视区域)的某个位置。
兼容性 IE6 只有 html 与 body 两个元素,支持这个属性值。

让你显得专业一定的技巧:

翻转效果:其实思路就是,准备两张大小相同,内容不同的图片,正常情况下显示一张
          在鼠标经过时候,在显示另一张。

它叫伪类,表示一种状态
:link

css精灵技巧:主要是为了,减少http 请求。

--------------------------------------------------------------------------------------

二、css布局的方式:
1、默认的,就是按文档流的顺序。按html 的结构顺序。

2、浮动方式:

3、定位方式:

三、浮动
  浮动就是将,块元素的,霸道属性,独占一行的行为,取消,允许别人其他一行。
  浮动其实是,这个块,从原来的文档流模式中,分离出来,它后的对象,就视它不存在。

  常用的布局效果,例如,一行并列式,就是在一行中,显示几个块元素。

css 把页面元素,分为两类,一种是块,一种是内联元素。

body,div, p, h1
ul与li 默认情况下是块元素,要想让他们在一行中显示,就要用到浮动。

我们在制作时,你多使用不同的浏览器查看你的结果,这样,你就能知道,各种浏览器的差别。
******总结出,当IE6 父元素,中的子元素,的高度超过了,父元素的高度,IE6默认,会把父元素的
高度,自动增加。

******如果想让,多个块,显示在同一行中,可以将,这些快,都设置为浮动,并且浮动的方向相同

******浮动浮动,先浮后动,浮动的对象,会先漂浮起,离开原来的位置。后动,就是他后面的对象。
会向它原来的位置上,动起来。

---------------------------------------------------------------------------------------------


四、清除浮动:就是可以去掉前面对象浮动,对后面对象的影响。

为什么,原来在一行中的两个块,会因为,浏览器窗口的大小,改变,而改变其原来的位置。

******设置一个块为水平居中时,都会给这个块设置一个宽度值。

******当父元素,没有指定,高度时,并且,它的子元素有浮动,这时,这个父元素的高度不会自动增加。
1、第一种方法:增加一个空标签,就是没有内容的标签。会增加代码。
2、第二种方法:给父元素,加overflow:hidden

******定位布局:就是可以通过元素的position 属性控制元素的位置。

*******当我们要想使用绝对定位时:必须有两个条件
【1】、必须给 父元素 加定位属性,一般建议使用 position:relative;
【2】、给子元素,加绝对定位position:absolute;同事要加方向属性。

*******相对定位于绝对定位。
绝对定位是父元素为基准点,进行定位----会脱离文档流
相对定位是根据自身为基准点,进行定位-----但还站着原来的空间



原文地址:https://www.cnblogs.com/sufi/p/5235538.html