zoukankan      html  css  js  c++  java
  • 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; }
  • 相关阅读:
    AI编辑SVG格式的相关问题
    HTML里的id等属性命名需要注意
    canvas绘图动画细节
    触控获取坐标判断滑动方向
    CSS3卡片旋转效果
    使用CURL下载远程文件保存到服务器
    微信JS-SDK应用DEMO
    布局转换:文档流->绝对定位
    ThinkPHP缓存微信公众号access_token
    JAVA JSP笔记
  • 原文地址:https://www.cnblogs.com/huhaibo/p/3633441.html
Copyright © 2011-2022 走看看