CSS样式分类及基本格式

最新推荐文章于 2023-02-28 14:59:14 发布

weixin_30258027

最新推荐文章于 2023-02-28 14:59:14 发布

阅读量395

点赞数 1

文章标签：人工智能

原文链接：http://www.cnblogs.com/chenliangping/p/5327409.html

版权

1、css样式分类

a、内联样式表
格式：
<h1 style="color:#ff0000">红色的标题</h1>
b、内部样式表
格式：
<head>
<style type="text/css">
..样式定义..
</style>
c、外部样式表
格式：
<head>
<link url="stylesheet" href="../css/标签.css>
</head>
2、css基础语法

h1{color:#ff0000;}
h1（选择器）{color（属性）:#ff0000（值）;（声明）}(声明块）
注意：
（1）多个声明用“;”隔开
h1{color:#ff0000;font:15px;}
（2）每条声明由一个属性和一个值组成
h1{color:#ff0000;}
(3)属性和值之间用“:”隔开
h1{color:#ff0000;}
（4）每个声明用“;”结束
h1{color:#ff0000;}
（5）属性可简写，根据css3规范建议缩写
h1{font-size:15px;(font:15px)}
（6）多个选择器公用一个声明，用“,”隔开
h1,h2{color:#ff0000;}
(7）每个选择器可以拥有多条声明
h1{color:#ff0000;
font:15px;
}
(8)不要在属性值与单位之间留有空格，否则浏览器可能不能读取数据

3、css选择器

（1）元素选择器
格式：标签元素名{....}
（2）id选择器
格式：id="名称" #名称{....}
（3）类选择器
格式：class="名称" .名称{....}
（4）包含选择器
格式：元素标签外元素元素{....}
（5）相邻元素选择器
格式：元素标签元素+元素{....}
（6）子元素选择器
格式：元素标签 > 元素{....}
（7）伪类、伪元素
格式：
元素标签:hover/first-line(首行）/first-letter(首字母)/first-child(第一元素){...}
4、css样式属性

（1）背景（background）
可接属性：background-size：大小，接数字，百分比
background-color：颜色，可接数字，百分比
background-position：位置
background-repeat：重复
background-image：背景图片
（2）文本（text）
可接属性：text-color：文本颜色
text-align：对齐方式
text-decoration：文本修饰（上下划线等）
text-line-height：行高
text-indent：首行缩进
text-transform：字母大小写
（3）字体（font）
可接属性：font-size：字体大小
font-family：字体类型（宋体、楷体等）
font-style：字体风格（倾斜等）
font-weight：字体粗细（100-900，bold粗体，bolder更粗，lighter更细）

（4）链接（a href=""）
    可接属性：a:link-普通的，未被访问的的链接
             a:visited - 用户已访问的链接
             a:hover - 鼠标指针位于链接的上方
             a:active - 链接被点击的时刻
（5）列表（ul ol）
    可接属性：list-style简写属性
            list-style-image将图像设为表项标志
            list-style-position 设置列表中列表项标志的位置
            list-style-type 设置列表项标志的类型
（6）表格（table）
    可接属性：border-collapse 设置是否把表格边框合并为单一的边框
            border-spacing 设置分隔单元格边框的距离
            caption-side 设置表格标题的位置
            empty-cells 设置是否显示表格中的空单元格
            table-layout 设置显示单元、行和列的算法
（7）轮廓（outline）
    可接属性：outline 在一个声明中设置所有的轮廓属性
            outline-color 设置轮廓的颜色
            outline-style 设置轮廓的样式
            outline-width 设置轮廓的宽度
（8）css尺寸
    可接属性：height 设置元素的高度
            line-height 设置行高
            max-height 设置元素的最大高度
            max-width 设置元素的最大宽度
            min-height 设置元素的最小高度
            min-width 设置元素的最小宽度
            width 设置元素的宽度
5、css优先级及权重值

第一等：内联样式，如：style="",权重值为1000（important1000）
第二等：ID选择器，如：#content，权值为0100
第三等：类，伪类选择器，如：.content，权值为0010
第四等：元素选择器，如div，p，权值为0001
通用选择器（*），子选择器（>)和相邻同胞选择器（+）权重值均为0000
注意：权值只能累加，但是不能进位，也即不同等级情况下，第一等最高，第四等最低，相同等级情况下，累加权值大的会优先解析

转载于:https://www.cnblogs.com/chenliangping/p/5327409.html

weixin_30258027

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS样式分类及基本格式

1、css样式分类 a、内联样式表格式： <h1 style="color:#ff0000">红色的标题</h1> b、内部样式表格式： <head> <style type="text/css"> ..样式定义.. </style> c、外部样式表格式： <head> <link url="styleshe...
复制链接

扫一扫