css

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

/*注释区域*/    此为注释语法

一、样式表

(一)样式表的分类

1.内联样式表

  和HTML联合显示,控制精确,但是可重用性差,冗余较多。

  例:<p style="font-size:14px;">内联样式表</p>

2.内嵌样式表

  作为一个独立区域内嵌在网页里,必须写在head标签里面。

  <style type="text/css">

  p   //格式对p标签起作用

  {

  样式;

  }

  </style>

3.外部样式表

  新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

  有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

(二)选择器

1.标签选择器。用标签名做选择器。

2.class选择器。都是以“.”开头。

3.ID选择器。以“#”开头。

<div id="样式名">

4.复合选择器

(1)用“,”隔开,表示并列。

(2)用空格隔开,表示后代。

(3)筛选“.”。

二、样式属性

(一)背景与前景

1.背景:

2.前景字体:

(二)边界和边框

border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

(三)列表与方块

width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用。

链接的style:

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

在定义这些状态时,有一个顺序l v h a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--<style type="text/css">
div,p
{
font-size:36px;
color:#90F;
background-color:#0F3;}

</style> -->
<link href="Untitled-3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="qq">div<p>标签</p></div>
<span style="background-color:#CF3; color:#F00">span层标签</span>
<p>这是一个温暖的春天。</p><p>12345</p>
<a href="http://www.autohome.com/">汽车之家</a>

</body>
</html>

@charset "utf-8";
/* CSS Document */
<style>
*
{
margin:0px;
padding:0px;}
p
{
font-size:36px;
color:#90F;
background-color:#0F3;}
#qq
{
background-color:#00F;
font-size:50px;
color:#F00;}
#qq p
{
background-color:#00F;
font-size:80px;
color:#6F0;}

a:link
{
text-decoration:none;
color:#000;}
a:visited
{
text-decoration:none;
color:#000;}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
text-decoration:underline;
color:#C60;}
</style>

html第四节课的更多相关文章

  1. centos Linux系统日常管理1 cpuinfo cpu核数 命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ,lsof ,pidof 第十四节课

    centos Linux系统日常管理1  cpuinfo cpu核数   命令 w, vmstat, uptime ,top ,kill ,ps ,free,netstat ,sar, ulimit ...

  2. centos 目录文件管理 mkdir,rm,touch,误删文件extundelete,cp,mv,cat,more,less ,head,tail,chown,chmod ,umask 第四节课

    centos 目录文件管理 mkdir,rm,touch,误删文件extundelete,cp,mv,cat,more,less ,head,tail,chown,chmod ,umask  第四节课 ...

  3. 风炫安全web安全学习第三十四节课 文件包含漏洞防御

    风炫安全web安全学习第三十四节课 文件包含漏洞防御 文件包含防御 在功能设计上不要把文件包含的对应文件放到前台去操作 过滤各种../,https://, http:// 配置php.ini文件 al ...

  4. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  5. 第四节课-反向传播&&神经网络1

    2017-08-14 这节课的主要内容是反向传播的介绍,非常的详细,还有神经网络的部分介绍,比较简短. 首先是对求导,梯度的求解.反向传播的核心就是将函数进行分解,分段求导,前向计算损失,反向计算各个 ...

  6. 《linux就该这么学》第四节课笔记,三章和四章开始!

    第三章 (根据课本和在线培训视频排版总结,借鉴请改动)         右键可打开终端练习             3.1:输入输出重定向 输入重定向:符号 "<" ,是一种 ...

  7. 《linux就该这么学》第十四节课:第13章,部署DNS域名解析服务(bind服务)

    (借鉴请改动)  第十二章收尾  12.2.nfs网络文件系统 RHEL7默认安装了nfs,配置文件在  /etc/export  写入格式:共享目录    允许的客户端(参数)  ro        ...

  8. C#第十四节课

    函数的调用 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...

  9. Linux第四节课学习笔记

    touch命令可修改文件atime和mtime,不能修改ctime.可用于修改文件后将修改时间改回之前修改时间. mkdir命令用于创建空白的目录,格式为“mkdir [选项] 目录”.加上参数-p可 ...

  10. php第二十四节课

    三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams

    The domStreams component property enables you to access Events from your Vue.js templates as Streams ...

  2. 依据矩阵的二维相关系数进行OCR识别

    我想通过简单的模板匹配来进行图像识别. 把预处理好的字符图片,分别与A到Z的样本图片进行模板匹配. 结果最大的表明相关性最大,就能够识别字符图片了. 在实际应用中.我用了openCV的matchTem ...

  3. 游戏人生(一),我的lua之旅:那些坑爹的CCBReaderLoad

    首先,我们说说这个CCBReaderLoad. 这个脚本是cocos2dx自带的一个lua+cocosbuilder 的工具,详细功能呐,往下看. 先来看下我遇到的一个问题: ----美工给了我一个. ...

  4. hook 鼠标键盘消息实例分析

    1.木马控制及通信方法包含:双管道,port重用.反弹技术.Hook技术,今天重点引用介绍一下hook的使用方法,hook信息后能够将结果发送到hacker邮箱等.实现攻击的目的. 转自:http:/ ...

  5. Unix网络编程 高级IO套接字设置超时

    我们知道.对于一个套接字的读写(read/write)操作默认是堵塞的.假设当前套接字还不可读/写,那么这个操作会一直堵塞下去,这样对于一个须要高性能的server来说,是不能接受的.所以,我们能够在 ...

  6. hdoj--5625--Clarke and chemistry(枚举)

    Clarke and chemistry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  7. 辨异 —— Java 中 String 的相等性比较

    How do I compare strings in Java? 1. 语法知识 ==:判断的是引用的相等性(reference equality),也即是否为同一对象: .equals():判断的 ...

  8. 联想Thinkpad L460安装Win7 64位

    单位发了L460,自带的系统为win10,但是涉及到很多工作以及客户都是在win7环境下,所以必须安装win7的系统,经过一番折腾,终于装好了. 主要顺序如下: 1,制作WINPE启动盘,如大白菜,老 ...

  9. Python 35 进程间的通信(IPC机制)、生产者消费者模型

    一:进程间的通信(IPC):先进先出  管道:队列=管道+锁 from multiprocessing import Queue q=Queue(4) q.put(['first',],block=T ...

  10. Django html页面 'ascii' codec can't encode characters in position 8-10: ordinal not

    用Django开发的页面,之前用的是python3.X,后来又换成python2.X后各种报错,编码问题,于是在所有python文件开头加了编码:#coding=utf-8 但是后来发现,有些文件加了 ...