• DIV+CSS教程


    今晚准备过一遍51dev.com上的开发在线教程(DIV+CSS教程)过一遍基础知识,记下自己不清楚的知识点。

    1、引入CSS有三种方式

    1)内联样式 例如<p style="font-size:12px;color:#fff;">么么哒</p>

    2)内联样式表

    1 <head>
    2 <style>
    3 p{font-size:12px;color:#fff;}
    4 </style>
    5 </head>

    3)外部样式表<link rel="stylesheet" href="style/mian.css" type="text/css">

    在优先级上:内联样式 > 内联样式表 > 外部样式表 > 浏览器默认样式(如点击链接有下划线)。

    2、CSS语法:selector{property:value;}就近原则

    在使用CSS样式的时候,可能会有一些网页元素同时适用于多个CSS样式,那么这时候CSS就会遵循就近原则以避免冲突。

    3、通配符

    div *{color:#FF0;}/* DIV标签内的所有字体颜色为*/

    4、伪类的典型应用

    1 #nav a:hover{
    2 color:#FF0000;
    3 text-decoration:underline;
    4 }

    :link  未被访问前

    :hover 鼠标悬停

    :active  被激活

    :visited  链接被访问过

    :first-child 设置元素的第一个子对象

    对于<a>标签中无“href”属性的内容,:hover,:link;:visited;:active均无效:hover必须置于:link 和:visited之后才是有效的:active必须置于:hover之后才有效

    5、颜色

    一、颜色名称方式

    使用颜色名称表示对应的颜色,如红色为“red”,灰色为“gray”等。

    例子:

    p{ color: red; }
    

    二、RGB方式

    格式为:rgb(R,G,B)

    • R:红色值。取值为 正整数 | 百分数
    • G:绿色值。取值为 正整数 | 百分数
    • B:蓝色值。取值为 正整数 | 百分数

    正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% - 100.0%,超出范围的数值将被截至其最接近的取值极限。

    例子:

    p{ color: red; }
    p{ color: rgb(255,0,0); }
    

    以上二者都表示红色。

    三、十六进制方式

    格式为:#RRGGBB

    • RR:红色值。取值为 00-FF十六进制正整数
    • GG:绿色值。取值为 00-FF十六进制正整数
    • BB:蓝色值。取值为 00-FF十六进制正整数

    参数必须是两位数,对于只有一位的,应在前面补零。如果每个参数各自在两位上的数字都相同,那么本单位也可缩写为 #RGB 的方式。例如:#FF8800 可以缩写为 #F80,但我们不建议写成缩写的方式。

    CSS 字体名称

    “font-family”属性用于设置字体名称,按优先顺序排列,以逗号隔开,如果字体名称包含空格,则应使用引号括起。

    CSS 文本缩进

    “text-indent”属性用于设置文本缩进。

    CSS 背景

    background-color 不继承 只不过子元素未设置背景默认为透明

    ,因此在感觉上“看”起来好像是继承了背景属性。

    1 body{background-image:url(../images/bg.gif);}

    background-repeat 默认背景图像在纵向和横向上平铺!

    CSS 列表

    1 ul li{ list-style-image: url(../images/li_red.gif); }
    2 ul li{list-style-type:square;}

    CSS表格

    border-collapse 属性设置是否吧表格边框合并为单一的边框

    1 table{ border-collapse: collapse; }
  • 相关阅读:
    eclipse整合spring+springMVC+Mybatis
    复杂系统分析与设计思路
    .NET数据挖掘与机器学习开源框架
    原来rollup这么简单之 rollup.watch篇
    面试官:说说你对css效率的理解
    两个实用的调试技巧
    Roma
    一个很实用的css技巧简析
    仅仅知道如何终止XHR请求,或许对你来说是不够的!
    再问你一遍,你真的了解try..catch(finally)吗???
  • 原文地址:https://www.cnblogs.com/huhaibo/p/3633441.html
Copyright © 2020-2023  润新知