【css+div】CSS样式基础学习教程系列-初步认识CSS样式表

林氏智造 于 2013-12-08 发布 2755 人已阅

【什么是CSS样式表】
CSS样式表,可以用于控制网页中字体、颜色、图像、表格、链接和布局格式。是Web页面设计的重要技术,它使得网页内容与样式定义彻底分开,甚至可以将CSS保存为.css的文件,使用时再进行调用导入。这样就可以通过定义和修改CSS达到页面设计的效果。

【常用CSS定义有三种方式】
1)内联样式:在标签内通过style属性添加样式信息。如<p style=”color:red;”>红色字</p>。
2)嵌入样式:在页面代码的<head></head>标签内放在单独的style元素中。如
<style type=”text/css”>
p{
   color:red;
}
</style>
3)外部样式:将内联样式的内容存放在一个.css文件中进行调用。

【用什么工具编辑CSS】
可以使用记事本或Dreamweaver进行定义。CSS定义规则,包括:
1)针对标记选择符定义。如
<style type=”text/css”>
 h1{ color:red;}
</style>
2)针对Html标签中一个id选择符定义。如id=” title”
<style type=”text/css”>
#title {color:white; background-color:silver;}
</style>
3)针对Html标签中class选择符定义。如class=” title”,页面可以有多个该类。
<style type=”text/css”>
.title {color:white; background-color:silver;}
</style>
另外,还有伪元素和伪类,标记语言中没有一种机制可以访问某个元素的首个字符或首行内容,而CSS可以创建这种虚拟元素访问或控制其样式。如:
:first-line为伪元素,某元素首行的样式;:first-letter为伪元素,某元素的首个字符。

【css缩写规则】
注意上、右、下、左的书写顺序:
1)关于边距(4边)
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px    (省略的左等于右)
1px 2px         (省略的上等于下)
1px            (四边都相同)
2)简化所有
body{margin:0}------------表示网页内所有元素的margin为0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin为0
3)缩写(border)特定样式
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4)关于文字的缩写规则
Font-style:italic; 斜体形式
Font-variant:small-caps/normal; 变体样式:小型大写字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
缩写成:
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意:Font-size和Line-height用斜杠组合在一起不能分开写。
5)关于背景图片
Background:#FFF url(log.gif) no-repeat fixed top left;
6)关于列表
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
缩写成:
List-style:none inside url(filename.gif);

【运用4种方法来引入CSS样式】

1)link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
其中rel 关系、type 数据类型(有多种)、href 路径。
部分浏览器支持候选样式,关键字:alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
2)内部样式块
<style>
<!–
h1{color:red;}
–>
</style>
3)@import
@import url{a.css}
注意:此指令必须放在<style>容器中,并且在所有样式之前,建议放在一个html注释中,即<!-->中。浏览器会不显示注释内的内容,而import等css代码能正常工作。
4)内联样式
<p style=”color:red;”>
选择器是css的一个基本概念,基本规则如下:
规则结构:h1 {color:red;} -----选择器 {属性:值;}
这类是元素选择器,基本可以包括所有html的元素,属性值可以包括多个元素,如:
border:1px solid red;
常用语法包括:
分组,选择器和声明都可以分组:
h1,h2,h3{color:red;background:#fff;} --- ---选择器用“,”分割开,属性用”;”分割
类选择器,即通过class=”stylename”应用的声明,定义:
.stylename{color:red;}
注意:在html中可以使用多类选择,如class=”cn1 cn2 cn3″。
ID选择器,即与id属性对应的样式,定义:
#a{color:red;} --- ---这个定义对用id=”a”的元素
这部分都是常见的css语法,下面介绍不常见的选择器语法:
父子结构,跟文档结构图对应。如
p span{border:1px solid red;}--- ---对应<p>下面的<li>标签,可以用于准确定位.
一些特殊应用(IE7支持):
p > span{}--- ---匹配所有p下所有的span
p + span{}--- ---匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签
属性选择器,(注意:属性选择器ie7才开始支持,以下版本并不支持,其他浏览器基本可以)。语法:
img[alt]{border:1px solid;}
表示对应有alt属性的img标签,当然可以支持多个属性对应。如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应,如:img[alt=”摄影”]{};
属性选择器中的高级应用,特殊匹配:
img[class~=”b”],其中 ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应。
[class^=”a”],以a开头的元素。
[class$=”a”]m,以a结束的元素。
[class*=”a”],包含a的元素。
[class|=”a”],等于a或以a开头的元素。
5)伪类和伪元素
日常使用中,主要是<a>标签的几个伪类:link:hover:active:visited,以及:first-child:first: before : left:right:lang:focus:fist-line等等。
注意,动态伪类可以应用到任何元素,如input:focus{background:red;} ,即当input标签获得焦点时背景变红。
以上语法组合使用,就能实现定位准确、简单间接的样式了。

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快