Lesson03_01 什么是CSS和CSS的设置方式

第3讲 CSS

  • 何为CSS
  • CSS的几种设置方式
  • 样式规则选择器
  • 样式规则的注释与有效范围
  • 样式属性详解

什么是CSS和CSS的设置方式

作者:Loncer 更多学习资源尽在:wwww.loncer.cn

什么是CSS

    CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.
例如下的代码:
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
即设置了一个CSS样式.

由上可知:一个HTML元素的style属性可以指定多种样式风格,每种样式 风格的名称和它的设置值之间用冒号来分开,每种样式风格之间用分号来分开.各种"样式风格名称"被称之为"CSS属性",样式风格的"设置值"被称为"CSS属性值".这种设置网页元素的显示效果的方式就是CSS.

CSS的设置方式



  • 内联样式表(inline style sheets)
直接设置HTML正方标签的style属性的方法称为内联样式表。
例如：<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
在使用内联样式表时HTML4.01标准建议用户在网页的<head></head>标签之间增加一个<meta>标签,
如下: <meta http-equiv="Content-Style-Type" content="text/css">
使用这种方法有两点不足:
1、如果要将同样的样式风格设置到所有的段落上，则要对每一个<P>标签进行重复的设置。
2、一个网页可以在多种介质或媒体上输出，使用内联样式表设置的样式会在所有的媒体上输出时都会起作用，而没法为不同的媒体指定不同的样式表。


  • 嵌入样式表(Embedded style sheets)
<head>
<style type="text/css" media="screen,projection">
<!--
P{"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"}
-->
</style>
</head>
media说明这个样式在什么介质上显示
<!-- -->是为了那些不支持CSS的浏览器而写的

在<style><style>标签对中定义的每条样式规则的基本格式如下：
selector{property:value;property:value……}
selector:
当定义一条样式规则时必须指定受这个样式作用的网页元素，在一条样式规则中定义的网页元素就是selector（选择器）,也就是选择该样式作用于网页元素。
有三种样式选择器：

  1. HTML标签，如：P、BODY、A……
  2. CLASS
  3. ID
property:
指定那些将要被修改的样式风格名称，即：CSS属性，如：color、font-size……
value:
赋给property的值，即CSS的属性值。
如果要在不多个网页中使用同一样风格，则要在每一个网页的HEAD中加入CSS定义，这就是嵌入样式表的不足之处

  • 外部样式表(Linked style sheets)
把嵌入样式表中的<style></style>之间的样式规则定义语句放在一个单独的外部文件中，这个外部文件就是外部样式表文件，其扩展名这.css。一个外部样式表文件可以通过HTTP的<link>标签连接到HTML文档中。
例：





先建一个test.css文件，代码如下：
P{
"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"
}
再写一个要使用该样式表的文件，设他俩在同一文件夹下：
<head>
<link rel="StyleSheet" href="test.css" type="text/css" media="screen">
</head>
type和media是可选的,rel和href是必须的
使用外部样式表，网页制作者可以通过改变一个文件就可以改变整个网络的外观。大多数浏览器会将外部样式表文件保存在缓冲区中，从而加快了网站的浏览速度。

  • 输入样式表(imported sytle sheets)
可以使用CSS的@import将一个CSS文件输入到另外一个CSS文件中,被输入的CSS样式规则定义语句就成了输入的CSS样式规则定义语句的一部分。也可以用@inport将一个CSS文件输入到<style></style>标签对中。被输入的CSS样式规则定义语句就成了<style></style>标签对中的定义语句。
例：



<style type="text/css" media="screen"><br>
<!--<br>
@import url(http://………………);<br>
@import url(/XXXX……………);<br>
p{background:yellow;color:black}<br>
--><br>
</style><br>

注：所有的@import部分要放在前面

赞 (0)

相关推荐

  • Assoc显示或修改文件名扩展关联

    Assoc显示或修改文件名扩展关联.如果在没有参数的情况下使用,则 assoc 命令将显示所有当前文件名扩展关联的列表. 语法 assoc [.ext[=[filetype]]] 参数 .ext  指定文件名扩展.  filetype  指定要与指定的文件名扩展相关联的文件类型.  /?  在命令提示符显示帮助.  注释 如果在等号后使用空格,则将删除某个文件名扩展的文件类型关联.  使用 ftype 命令可查看已定义了打开命令字符串的当前文件类型.  使用 > 重定向操作符可重定向 assoc

  • js压缩工具 yuicompressor 使用教程

    js压缩工具 yuicompressor 使用教程

    我们提供的js,css压缩工具 yuicompressor 2.46打包简介 官方网址:http://developer.yahoo.com/yui/compressor/ JS与css 压缩工具 yuicompressor当前最新版本:2.4.2 运行需要先安装JDK,官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-download-513651.html 根据自己的系统选择合适的版本,一般情况下58

  • PHP中SSO Cookie登录分析和实现

    PHP中SSO Cookie登录分析和实现

    什么是SSO? 单点登录SSO(Single Sign-On)是身份管理中的一部分.SSO的一种较为通俗的定义是:SSO是指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其他应用中的受保护资源时,不再需要重新登录验证 SSO的用途: 目前的企业应用环境中,往往有很多的应用系统,淘宝.天猫.爱淘宝等等产品和如办公自动化(OA)系统,财务管理系统,档案管理系统,信息查询系统等等.这些应用系统服务于企业的信息化建设,为企业带来了很好的效益.但是,用

  • php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别

    方法名:mssql_fetch_row() 测试: 复制代码 代码如下: require 'dbconn.php'; $sql = 'select * from _Test'; $query = mssql_query($sql); while($row=mssql_fetch_row($query)) { echo $row['UserId'].'::'.$row[1].'<br>'; } 返回: Notice: Undefined index: UserId in D:/_PHP_Test

  • 基于.Net的单点登录(SSO)实现解决方案

    基于.Net的单点登录(SSO)实现解决方案

    前些天一位朋友要我帮忙做一单点登录,其实这个概念早已耳熟能详,但实际应用很少,难得最近轻闲,于是决定通过本文来详细描述一个SSO解决方案,希望对大家有所帮助.SSO的解决方案很多,但搜索结果令人大失所望,大部分是相互转载,并且描述的也是走马观花. 闲话少叙,进入正题,我的想法是使用集中验证方式,多个站点集中Passport验证. 如下图所示:  为方便清晰描述,先定义几个名词,本文中出现之处均为如下含义. 主站:Passport集中验证服务器 http://www.passport.com/ .

  • mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别

    复制代码 代码如下: <?php $link=mysql_connect('localhost','root',"); mysql_select_db('abc',$link); $sql = "select * from book"; $result = mysql_query($sql); while($row = mysql_fetch_row($result)) { echo $row['cid'].'::'.$row[1].'<br>'; } $r

  • css js 图片压缩批处理命令(基于YUI Compressor)

    复制代码 代码如下: @echo off ::设置YUI Compressor启动目录 SET YUIFOLDER=D:\yuicompressor-2.4.2\build\ ::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS SET INFOLDER=D:\jscss\src SET OUTFOLDER=D:\jscss\build echo 正在查找 JavaScript, CSS ... chdir /d %INFOLDER% for /r . %%a in (

  • 推荐学习php sesson的朋友必看PHP会话(Session)使用入门第1/2页

    由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只保留了系统读和写权限,而且不能通过 ftp 修改,所以安全得多. 对于 Cookie 来说,假设我们要验证用户是否登陆,就必须在 Cookie 中保存用户名和密码(可能是 md5 加密后字符串),并在每次请求页面的时候进行验证.如果用户名和密码存储在数据库,每次都要执行一次数据库查询,给数据库造成多余的负担.因

  • PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题

    返回一个交集共有元素的数组(只是数组值得比较).array_intersect_assoc()函数是将键值和值绑定,一起比较交集部分.array_intersect_key()函数是将两个数组的键值进行比较,返回键值交集的数组.但实际应用中也遇到了一些小问题,正如下: 实例: 复制代码 代码如下: <?PHP $array = array("red"=>"Red","green"=>"red4","

  • mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array

    mysql_fetch_assoc只能用字段,就像mysql_fetch_array($result, MYSQL_ASSOC)结果一样. mysql_fetch_row 只能是数字 加起来就是mysql_fetch_array

  • php的sso单点登录实现方法

    本文实例讲述了php的sso单点登录实现方法.分享给大家供大家参考.具体分析如下: 这里详细讲到了几点: 1.点击登录跳转到SSO登录页面并带上当前应用的callback地址 2.登录成功后生成COOKIE并将COOKIE传给callback地址 3.callback地址接收SSO的COOKIE并设置在当前域下再跳回到应用1即完成登录 4.再在应用程序需要登录的地方嵌入一个iframe用来实时检测登录状态,代码如下: index.php 应用程序页面: 复制代码 代码如下: <?php  hea

  • php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo

    复制代码 代码如下: $id = intval($_GET['id']); $row = $db->getResult($db->query("select * from ".$t."product where id=$id;")); $rows = $row[0];//处理mysql_fetch_assoc返回来的数组 不用foreach----echo!

随机推荐