`
pouyang
  • 浏览: 320015 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Css Css基础

    博客分类:
  • Css
阅读更多
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 css选择符
1.1 基本选择符
标签
body {background-color:blue;}
id选择符
#content {
text-align:center
}
class选择符
.title {
font-family:arial;
}
1.2 群组选择符
h1,h2,h3,p,span {
  font-size:12px;
}w
1.3 包含选择符
h1 span {
font-weight:bold;
}
对h1下面的span进行样式指派
1.4 标签指定式选择符
h1#content{}
针对所有id=content的h1标签
h1.p1{}
针对所有class为p1的h1标签
(注意:中间没有空格)
1.5 组合选择符
h1 .p1{}
针对h1标签下的所有class为p1的标签
#content h1{}
针对id=content标签下的所有h1标签
h1 .p1,#content h1{}上面的组合
h1#content h2{}
针对id=content的h1标签下的h2标签
1.6 伪类
a:hover{
background-color:#3333333;
}
1.7 通配选择符
*{
  color:blue;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2 CSS数值单位
px:
em:
ex:
pt:
pc:
in:
mm:
cm:
rgb:
#RRGGBB:
Color Name:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3 CSS之DIV
head+left+right
<style>
 body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
 }
#head {
	background-color:#cccccc;
	border: 2px solid red;
	width:100%;
}
#left {
 background-color:#cccccc;
 border:2px solid #333333;
 width:20%;
 height:100%;
 float:left;
}
#right {
 padding-left:0px;
 background-color:#cccccc;
 border:2px solid #333333;
 /* width:80%; */
 height:100%;
 /* float:left; */
}
</style>
<div id = "head"></div>
<div id = "left" ></div>
<div id = "right" ></div>
 

几个比较常用的css属性设置:
margin:上 下 左 右;
padding: 上 下 左 右
position: absolute; /* 绝对位置
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4 层叠与覆盖
上下层叠和覆盖z-index
4.1 z-index属性就用来控制层叠和覆盖的。
按照定义,z-index的数值越大,则元素容器越在上层。
z-index的属性值可以是正整数,0和负整数.
h1 {
color:red;
color:blue;
}
blue会把red覆盖。

4.2 层叠采用以下重要度次序:
1 标为!important的用户样式
2 标为! important的作者样式
3 作者样式
4 用户样式
然后,根据选择器的特殊性决定规则的次序。具有更特殊选择器的选择器的规则
优先于具有比较一般选择器的规则,如果两个规则的特殊性相同,那么后定义的
规则优先。
特殊性:
选择器的特殊性分为四个成分等级:a,b,c,d
1 如果样式是行内样式,那么a = 1
2 b = ID选择器的总数。
3 c = 类,伪类和事项选择器的数量
4 d = 类型选择器和伪元素选择器的数量
例如:
style = "";  特殊性  abcd = 1000;
#wrapper #content{} 特殊性  abcd = 0200;
div#content{} 特殊性  abcd = 0101;
特殊值谁大谁优先!
4.3 超链接样式

a:link,a:visited {
color:#666;
text-decoration :none;
}

a:hover,a:active {
text-decoration:underline; /* line-through,underline */
background-color:#ffe;
}
分享到:
评论

相关推荐

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    【CSS基础学习】是网页设计领域中的重要环节,它是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS(层叠样式表)让网页设计者能够分离内容与表现,使得网页设计更加灵活且易于...

    css样式基础版

    css样式,很好用好,很不错,可以试试

    html + css 基础学习.zip

    html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...

    DIV+CSS教程——第一天XHTML_CSS基础知识

    DIV+CSS教程——第一天XHTML_CSS基础知识

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS基础学习源码

    本“CSS基础学习源码”是一个适合初学者的资源包,提供了丰富的实践材料,帮助理解并掌握CSS的基础知识。 首先,我们来详细探讨CSS的基础概念: 1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位...

    尚硅谷前端入门html+css零基础教程,零基础前端开发html5+css3视频尚品汇项目源码

    【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的,面向初学者的前端开发课程,主要涵盖了HTML(超文本标记语言)和CSS(层叠样式表)的基础知识。这个教程是为那些对前端开发...

    css 基础样式 base.css

    css基础样式

    html&css入门基础知识点.pdf

    HTML和CSS基础知识点 HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...

    css基础.ppt

    css基础教程,适合新手使用,仅供参考

    css基础教程-适合初学者

    在IT领域,CSS...总结,学习CSS基础不仅涉及语法和选择器,还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念,初学者可以逐步提升CSS技能,从而更好地设计和构建美观、功能完善的网页。

    css基础代码

    ### CSS基础代码详解 #### CSS入门精要:掌握核心概念与实践技巧 **CSS(Cascading Style Sheets)**,即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的标记语言。它使得网页设计更加灵活、高效...

    CSS基础-介绍及语法

    CSS基础-介绍及语法,css入门必备资料

    CSS基础教程 源代码

    书名:CSS基础教程 作者:(英)柯林森 著,刘志忠 等译 来源:人民邮电出版社 出版时间:2007年09月 ISBN:9787115164629 定价:49元 内容介绍: 本书是优秀的CSS 入门书,重点讲述了如何使用CSS 实现基于Web ...

    CSS基础知识.pdf

    【CSS基础知识详解】 CSS,全称为Cascading Style Sheets,中文通常翻译为“层叠样式表”,是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性,让网页设计更加灵活多样。自IE 3.0开始,浏览器...

    CSS入门基础经典教程

    **CSS入门基础经典教程** **一、CSS简介** 在网页设计中,CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS控制了网页元素的布局、颜色、...

    [CSS] CSS 基础教程 英文版

    [SitePoint] CSS 基础教程 英文版 [SitePoint] Jump Start CSS E Book ☆ 图书概要:☆ This short SitePoint book provides readers with a fun and yet practical introduction to Cascading Style Sheets ...

    CSS基础学习胶片

    【CSS基础学习胶片】 CSS,全称Cascading Style Sheets,中文译为层叠样式表,是网页设计中用于控制网页布局和样式的语言。它与HTML(超文本标记语言)相辅相成,让网页的设计更加丰富多彩,易于维护。本资料集面向...

    html+css的基础学习.zip

    html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习html+css的基础学习 html+css的基础学习html+css的基础学习html+css的基础学习...

Global site tag (gtag.js) - Google Analytics