CSS 内容串联

最新推荐文章于 2024-01-04 11:34:46 发布

weixin_30919429

最新推荐文章于 2024-01-04 11:34:46 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/likaixuan/p/4442952.html

版权

CSS ----层叠样式表 Cascading Style Sheet

一、CSS的分类

1.外部样式表---.css文件

2.内嵌样式表---放在<head><style type="text/css"> </style></head>

3.内联样式表---放在标记style上的属性

二、选择器

（一）基本选择器

1.id 选择器：#

2.class 选择器：.

3.标签选择器：标签名，例 body{}

（二）组合选择器

1.用逗号隔开。并列关系 html,body,#dd,#s{}

2.用空格隔开的。后代关系 .ss a{} .ss .aa{}

3.筛选。选择器.class选择器 input.tt (筛选的是input，找class=tt的input)

input .tt(放在input 里面class=tt的所有元素)

层叠的含义：

1.样式表类型的层叠

2.选择器的层叠

3.父子元素的层叠

优先级：

1.一般来说，id选择器的优先级要高于class选择器的优先级，class选择器的优先级高于标签选择器的优先级。

2.对于同一类型的选择器，内联样式的要高于内嵌，内嵌样式的优先级要高于外部的。

三、样式表的属性

（一）前景和背景

1.背景：background-color:背景色

background-image:url(路径) 背景图

background-attachment:fixed---背景固定，scroll---背景与文字一起滚动

background-repeat: repeat----平铺，no-repeat---不平铺， repreat-x---横向平铺，repeat-y---纵向平铺

background-position: right 100px bottom 200px; left top; center.......(设置背景图时，repeat 必须是 no-repeat)

2.前景：font-family:

font-size:

color:

font-weight:bold;

font-style:italic;

text-decoration:underline,none,overline(上划线)，line-through(删除线)；

text-align:left,center,right.

vertical-align:middle,top,bottom.

line-height:行高。一般是 font-size的 1.5--2倍。

（二）边界和边框

1.边框（二位界面）

boder	style	color	width
top	border-top-style	border-top-color	border-top-width
right	border-right-style	border-right-color	border-right-width
bottom	border-bottom-style	border-bottom-color	border-bottom-width
left	border-left-style	border-left-color	border-left-width

2.外边距 padding:top right bottom left

3.内边距 margin:top right bottom left

（三）列表和方块

方块：width ,heiht , top , left ...

列表（<ul><li></li></ul>）:

list-style-type:

list-style-position:outside,inside.

list-style-image:url(路径)

display: none---不显示， block---块显示（独占一行），inline---不独占一行（width,height不管用）， inline-block---不独占一行（width,height管用）

visibility:是否可见。 visible---可见，hidden---隐藏。如果隐藏起来，但位置依然是占用的。

overflow:溢出处理。 hidden---隐藏超出部分，scroll---超出就显示滚动条。

（四）格式和布局

位置布局

position:(fixed,absolute,relative)

配合的样式属性：top,right,bottom,left.......

fixed----绝对定位。以浏览器可见区域为坐标系进行定位，不是页面为坐标定位。通常用来做浮动层，ie6不行。例子：右下角的广告小窗口，弹窗。。。。

relative---相对定位。相对的意思是：相对于该元素原本应当在的那个位置。虽然元素显示的位置变化了，但原来的空间依然是占用的。

absolute----绝对定位。如果元素外围的元素没有设置absolute样式，那么它以整个页面为坐标系进行定位。

                                              例子：<style type="text/css">
                                                      #d1{....}
                                                      #d2{.....;position:absolute;top:100px;left:100px;}
                                                      </style>

如果这个元素外围有一个元素具有position样式属性，那么他是以这个外围元素为坐标进行定位的。

                                                      例：<style type="text/css">
                                                      #d1{....;position:absolute;}
                                                      #d2{.....;position:absolute;top:100px;left:100px;}
                                                      </style>

流式布局

float:

配合的样式属性：margin,margin-top,margin-right,margin-bottom,margin-left;

clear:清除浮动。clear:both

例子：

例一、几个并列的层使用float布局的规律。(注意消除浮动)

</style>

若是下面的两个红框不浮动上去，用 clear:both 消除浮动。

例二、嵌套的层，使用float布局的规律。（内外层都要float）

CSS 命名规范：

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。

main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

（二）注释的写法:
/* Footer */
内容区
/* End Footer */

（三）id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

转载于:https://www.cnblogs.com/likaixuan/p/4442952.html

weixin_30919429

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 内容串联

CSS ----层叠样式表 Cascading Style Sheet一、CSS的分类1.外部样式表---.css文件2.内嵌样式表---放在<head><style type="text/css"> </style></head>3.内联样式表---放在标记style上的属性二、选择器（一）基本选择器1...
复制链接

扫一扫