文档章节

CSS基础

ivan-Zhao
 ivan-Zhao
发布于 2015/10/17 10:02
字数 1183
阅读 11
收藏 0
  1. XHTML

   XHTMLThe Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。

 

  1. XHTML的元素

H1…..h6 , ul   ol  dl ,  caption  thead  tbody  tfoot; p

 

ol  有序列表。
<ol>
    <li>
……</li>
    <li>
……</li>
    <li>
……</li>
</ol>

表现为:
1
……
2
……
3
……

Ul  无序列表。
<ul>
    <li>
……</li>
    <li>
……</li>
</ul>

表现为li前面是大圆点而不是123

dl内容块

dt内容块的标题

dd内容

可以这么写:
<dl>
    <dt>
标题</dt>
    <dd>
内容1</dd>
    <dd>
内容2</dd>
</dl>

dt dd中可以再加入ol ul lip

理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

  1. css的调用方式

 1、行间样式表

Style=“属性:属性值

2、内部样式表

<style type=“text/css”>

选择符{属性:属性值}

</style>

3、外部样式表

<link rel=“stylesheet” type=“text/css” href=“文件名/style.css” />

 

  1. css 常用属性

 

color:#ff0000;   // 指定颜色

 font-family:微软雅黑,黑体,宋体; //字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起

 font-size:9pt;  //设置或检索对象中的字体尺寸。

 font-weight:bold;   //设置或检索对象中的文本字体的粗细。

 text-decoration:underline ; //检索或设置对象中的文本的装饰,比如下划线等。

 line-height:50px;   //检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

text-indent:24px;  //检索或设置对象中的文本的缩进。默认值为 0 

 text-align:left;  // 设置或检索对象中文本的对齐方式。

 word-break : break-all;  //设置或检索对象内文本的字内换行行为。

 background: url("images/aardvark.gif") repeat-y;  //背景图片

 background: #000000;  //背景颜色

width:250px;  //检索或设置对象的宽度

 height:300px;  //检索或设置对象的高度

 clear : both;    //该属性的值指出了不允许有浮动对象的边

float:left;  //该属性的值指出了对象是否及如何浮动。

margin:0;  //检索或设置对象四边的外补丁

 border:1px solid #ff0000; //设置对象的边框样式

 padding:0;  // 检索或设置对象四边的内补丁。

 cursor: pointer;  //设置或检索在对象上移动的鼠标指针采用的光标形状


  1. ID CLASS 和类名
    1. class  ID 的区别
    2. 类名尽量有

 

  1. divspan

       DIV的作用是为网络文档中的结构区域分组--------如汇总所有的初级内容,然后是二级内容。而span则是用来分开一个父元素之中的行内内容

    <span>  display  inline,是个行级元素

    <div>  display  block是个块级元素

    <span> 像文字一样,几个连续的<span>会显示在一行,满了会自动换行

 

 

  1. 常用的选择器

类型选择器(元素或简单选择器)和后代选择器

类型选择器: p{color:red;}  a{color:red;}  h1{color:red;}

后代选择器:(用来寻找特定元素的后代)比如:li a{text-decoration:none;}

ID 选择器(#表示)类选择器.表示)

组合选择器:

 

  1. 伪类

a:link    a:visited   a:hover   a:active;

<必须按顺序>标准的

a:link {color: #FF0000}     /* 未被访问的链接红色 */

a:visited {color: #00FF00}  /* 已被访问过的链接绿色 */

a:hover {color: #FFCC00}   /* 鼠标悬浮在上的链接橙色 */

a:active {color: #0000FF}   /* 鼠标点中激活链接蓝色 */

这样可以避免一些访问过后的超链接就不具备hoveractive样式了

 

<有一个要注意的地方,就是,如果你刚开始不是按这个顺序来做,后来,改正以后,可能当时出不来效果,解决方法是,清理一下缓存,因为缓存的原故,所以,才会出现这种现象.>

 

  1. 通用选择器

*{ padding:0;margin:0;}

 

10 继承

p,div ,li{color:red}  可以写成 body{color:red;}

 

  1. 注析

/*  */

 

12vertical-align:middle; 

这个元素我们曾经在table中用的比较多就是可以使一行文字进行垂直方向的居中,但是在div 中我们使用这个来使层中的元素垂直方向居中,却起不了作用,在层中我们使用另外一种的方法。

{

Line-height:20px;

Height:20px;

}

在层中我们把层的高度和行高设置为一个值,那么层中的元素就会垂直居中

© 著作权归作者所有

ivan-Zhao
粉丝 10
博文 33
码字总数 29110
作品 0
深圳
程序员
私信 提问

暂无文章

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部