欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

CSS Cascading Style Sheet 层叠样式表

 CSS Cascading Style Sheet 层叠样式表

设置html页面的样式

html负责显示 css 负责样式 显示和样式分离

编写css的位置:

1 标签内部

<div style="属性:值;属性:值">

2 页面中 <style>

选择器{

属性:值;

属性:值;

}

</style>

3 外部css文件(.css) 在html中通过 <link />导入css文件 ------最常用

选择器{

属性:值;

属性:值;

}

选择器: 作用? 用来选择到页面上标签

css的选择器种类有很多

最常用的三种:

1 标签选择器 标签名{} div{} 选择到页面上的所有div标签 p{}

2 id选择器 同一个页面中所有标签id属性的值 都不要相同

#标签id属性值{

}

3 class选择器(类选择器) 先定义 再引用

.aaa{} <div class="aaa">AAA</div>

css中常用的属性:

color 颜色

font-size 字体大小

font-family 字体

font-weight 字体粗细

font-style 字体样式 italic(斜体) <i></i>

font:粗细 样式 大小 字体

line-height (行高)

text-align (对齐)

letter-spacing (字符间距)

text-decoration (文本修饰 )

cursor:pointer 手型图标 (当然可以指定其他形状图标)

width 宽度

height 高度

background-color:#FF0;

background-image:url(flower4.jpg);

background-repeat:no-repeat;

background-position:300px 300px

background:#3FF url(flower4.jpg) no-repeat 400px 400px

关于列表的css

list-style: decimal/lower-latin/ lower-roman/lower-greek

circle/square/disc

none

浮动布局: 打破 html中块级标签独占一行的特征

float:left/right

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

盒模型:

边框 每个html标签都有边框 border

外边距 margin

设置某个标签的margin-left:100px

距离这个标签的左边框100px内不能有其他标签

margin-left

margin-right

margin-top

margin-bottom

margin: 1个值 上下左右4个方向

margin: 2个值 上下 左右

margin: 3个值 上 左右 下

margin: 4个值 上 右 下 左

margin:100px auto; 上下 100 左右居中

内边距 padding

设置标签的内边距 padding-left:100px

调整的是这个标签中包含的元素具体它左侧边框的距离 (不是调整为设置的值,而是在原来的基础上加上设置的值)

超链接样式的四种状态

未访问状态(a:link )

已访问状态(a:visited )

鼠标移上状态(a:hover )

激活选定状态(a:active )

图片的css:

img{filter:gray} 只有ie有效

图片旋转: transform:rotate(60deg) firefox

关于隐藏和显示的css

display:none 隐藏

:inline 不会独占一行

:block 独占一行

CSS中的选择器:

1 标签选择器

2 ID选择器

3 class选择器

4 * 通用选择器 选择到的是页面上的所有标签

5 E F 后代选择器 选择到的是F标签 F标签是E 标签的后代

6 E>F 父子关系选择器 选择到的是F标签 F标签是E标签的子标签

7 E+F 直接后兄弟选择器 选择的是F F要是E的兄弟

8 E~F 一般后兄弟

9 E[foo] 选择到有 foo属性的E标签

10 E[foo="xxx"] 选择到 foo属性值是xxx的E标签

11 E[foo^="xxx"] 选择到 foo属性值是以xxx开头的E标签

12 E[foo$="xxx"] 选择到 foo属性值是以xxx结尾的E标签

13 E,F,G 选择到页面上所有 E 和 F 和 G标签

14 伪类选择器:

E:first-child

E:link

E:visited

E:active

E:hover

E:focus

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s50813.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-31 22:17 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。