CSS总结

一、CSS特性

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

   哪些css样式可以直接被继承:

    [1]:文本相关属性:如font-size、font-family、line-height、text-index等。

    [2]:列表相关属性:list-style-type等。

    [3]:颜色相关属性:color等。(注:button、input、select、textarea在IE下是不继承body属性的,需要单独写)。

  2.层叠:子元素如果定义了与父元素一样的样式,就会覆盖父元素的样式。

二、CSS选择符

  1.CSS选择符就是要控制的对象,要想对某一元素进行控制,有两种方式。

    1).使用id选择器,要求id在网页中必须具有唯一性。在CSS文件中的语法为:#id名称{属性:值}。

    2).使用类选择器,自己定义样式后,可以应用给一个或多个元素,一般用于定义重复的样式。类以英文"."开头,后面的名字需要自己定义,类定义后需要在需要使用的元素上使用class="类名"加以调用。(注:可以同时给一个元素加多个类,类之间用空格隔开。类和id都不要以数据开头)。

  2.CSS选择符控制页面所有的html元素(包括哪些本身有默认值的元素),使用通配符"*",但效率较低,不建议使用。

    语法:*{属性:值}

  3.选择符的嵌套(包含/派生)使用。优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化,优化了css代码!

语法:父元素 子元素{属性:值},如:table td{color:blue;}

  4.选择符分组(集体控制):将同样的样式定义用于多个选择符,选择符之间用逗号隔开。

    语法:选择符1,选择符2,选择符3....{属性:值} 如:p,div,h1,table{属性:值}。

  5.标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符。

    语法:元素标记+选择符{属性:值} 如:h1.waring{属性:值}表示针对所有class为waring的h1标签。

  6.组合选择符:将以上选择符进行组合使用,如:h1.waring,h2#contect{属性:值}。

三、CSS优先权

  就近原则:作用范围越小,优先级越高,离修饰目标越近,优先级越高。

  四种应用样式方式的优先级:内联式[行内样式] > 内嵌式[内部式] > 链接式[外部式] > @import导入式。

  选择符优先级:行内 > id > class > 标签选择器(注:我们可以通过在属性值后面加"!important"来提升优先权[重要性],IE6不兼容)

 四、CSS默认值问题

  由于各个浏览器的内外边距存在默认值。而且还不同,所以我们需要首先将所有的浏览器的内外边距的默认值都设置为零,css属性虽然有继承的特点,但是并不是所有的属性都能继承。

  在实际的工作中,我们用到了哪些标签,就给那些标签进行重置内外边距。并且一般把ul和ol的边框list-style的属性设置为none;

五、列表的使用语法

  list-style:list-style-image(列表图片)  list-style-position(列表符号的位置)  list-style-type(列表的样式) (list-style:none 表示不要符号的列表)。

六、CSS控制边框属性

  语法:border:border-width border-style border-color.(如果只写border,则后面紧跟着的是粗细、样式、颜色三个子属性)。

功能

语法

设置边框粗细

boder-方向-width:值;

设置边框颜色

border-方向-color:值;

设置边框样式

boder-方向-style:值;

设置某一边框属性的简捷方式

border-方向:线宽 线型 颜色(线型常用:solid、dashed)

设置某一元素的四条边框的简捷方式[仅限于四条边框属性完全相同]

border:线宽 线型 颜色

七、CSS控制背景

  1.语法:background:background-color  background-image background-repeat background-attachment background-postion.

功能

语法

背景

background:颜色 图片 平铺方式 固定方式 位置

背景颜色

background-color:值

背景图片

background-image:url(背景图像的位置及全称)

背景图片的重复方式

background-repeat:(repeat no-repeat repeat-x repeat-y)

背景图像的位置

background-postion:(垂直位置)top[center left right] (水平位置)center[left top right] bottom[left center right],x坐标,y坐标[第一个值是水平位置,第二个值是垂直位置,左上角是0 0 ,单位是像素(0px,0px)]

背景图像的依附方式

background-attachment:[scroll ,fixed]

    注:背景图像,默认情况下是进行水平和垂直位置上的平铺,默认在盒子的左上方显示。图片的依附方式的含义是:将图像固定在屏幕的某个位置。(但在IE6中只有html和body 两个元素支持此属性。)

  2.制作翻转按钮效果:将两张图片进行合成;

八、CSS技巧

[1]:让盒子水平居中,只需将盒子的左右外边距margin设置为auto,即margin:5px auto;

  [2]:让盒子的中的内容垂直居中,设置行高line-height等于盒子的高度height,但是不能有换行!

  [3]:我们在调试的时候可以适当的增加背景颜色。

[4]:CSS精灵技巧,主要是为了减少http请求,提高网页效率。核心思想是把多张图片合成一张图片里,通过修改背景属性中的定位来控制到底显示图片中的哪些部分。

[5]:CSS常见布局方式:一行一列居中、一行两列居中、两行两列、三行两列、三行三列.

  [6]:当父元素没有指定高度并且子元素有浮动时,这个父元素的高度不会自动增加.

[7]:在给盒子的父盒子加居中时,一定要有宽度才能使得父盒子居中.

  [8]:当有浮动元素有与浮动方向一样的外边距时,在IE6中会出现双倍间距的现象,解决方法是:给此元素加:display:inline;就可以很好的解决.

九、CSS元素分类

[1].块状元素:{display:block}一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)和高度(height)起作用。常见块状元素有:div、p、body、h1~h6等(能设置宽和高,独占一行)。

[2].内联元素:{display:inline}内联元素只能容忍文本和其他内联元素,它允许其他元素与其同一行,但宽度和高度变得不起作用,常见内联元素有:em、span、a等(不能设置宽和高,不影响换行)。

十、部分CSS样式详解

  1.CSS溢出

 功能:设置当对象的内容超过其指定高度及宽度时如何显示

     语法:Overflow:visible(默认值,不剪切内容,也不添加滚动条) 

            auto(在必须时对象内容才会被裁切或显示滚动条) 

               hidden(不显示超过对象尺寸的内容) 

             scroll(总是显示滚动条)

  2.Zoom:只有IE的浏览器支持,是缩放比例

    功能:设置或检索对象的缩放比例

    语法:Zoom:Normal:默认值,使用对象的实际尺寸

          Number:百分数|无符号浮点实数,浮点实数为1.0或百分数为100%时相当于此属性的normal值。

          Zoom:1;解决IE6兼容性问题。

   3.cursor:用来改变鼠标的样式

可以自己定义鼠标的图像,格式为:style="cursor:url(图片的路径及名称)"。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

13830
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

45480
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

8010
来自专栏淡定的博客

css3的一些新属性总结

box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:

8610
来自专栏有趣的django

18.CSS

选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

34770
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

18310
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

36660
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

21220
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

33060
来自专栏进击的君君的前端之路

CSS常见样式(一)

31230

扫码关注云+社区

领取腾讯云代金券