资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS层叠样式有哪些

这篇文章主要讲解了“CSS层叠样式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS层叠样式有哪些”吧!

创新互联为企业级客户提高一站式互联网+设计服务,主要包括成都网站设计、做网站app软件定制开发重庆小程序开发、宣传片制作、LOGO设计等,帮助客户快速提升营销能力和企业形象,创新互联各部门都有经验丰富的经验,可以确保每一个作品的质量和创作周期,同时每年都有很多新员工加入,为我们带来大量新的创意。 

CSS Cascading Style Sheet 层叠样式表

设置html页面的样式

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

编写css的位置:

1 标签内部

2 页面中

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

选择器{

属性:值;

属性:值;

}

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

css的选择器种类有很多

最常用的三种:

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

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

#标签id属性值{

}

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

.aaa{}

AAA

css中常用的属性:

color 颜色

font-size 字体大小

font-family 字体

font-weight 字体粗细

font-style 字体样式 italic(斜体)

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

感谢各位的阅读,以上就是“CSS层叠样式有哪些”的内容了,经过本文的学习后,相信大家对CSS层叠样式有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前标题:CSS层叠样式有哪些
本文地址:http://www.cdkjz.cn/article/goipse.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220