CSS基础1——CSS样式表及样式规则

1、CSS(Cascading Style Sheets)层叠样式表。用于定义HTMl元素的显示形式,是W3C推出的格式化网页内容的标准技术

2、CSS作为每个网站设计者必须掌握的技术之一,有几个优点

(1)提高页面浏览速度,比传统文本设计方法至少节约50%以上的文件尺寸

(2)缩短改版时间,降低维护费用

(3)结合CSS和DIV,更好的控制页面布局

(4)实现表现和结构、内容相分离

(5)更方便搜索引擎的搜索

3、CSS样式表

(1) 嵌入式样式表

用<style>元素将样式包含在网页内部的样式设置,<style>段必须出现在文档的<head>段内,可以有多个<style>段

如:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<style type="text/css">
		div{
			width: 100px;
			color: red;
			background: #eee;
			font-weight: bold;
		}
		</style>
	</head>
	<body>
		<div>嵌入式样式</div>
	</body>
</html>   

(2)外部样式表

在外部创建.CSS文件,编写CSS代码,然后在.html文件中链接使用。

语法:<link rel="stylesheet"  type="text/css"   href="样式表中的URL"/>

(3)内联样式表

仅用于部分网页元素,其作用范围仅限于应用它的网页元素,内联样式在HTML标记中

如:<div style="color:red;  font-weight:bold;"> 内联样式</div>

4、样式规则

(1)选择器:指定样式规则可作用于HTML文档中哪个元素或者那些元素,在样式规则中左大括号左边的就是选择器。

如:   h1{ color:orange;  background-color:  #eea; }中的h1

(2)声明块:大括号之间的部分

如: h1{ color:orange;  background- color: #eea;} 中的  color:orange;  background- color: #eea; 部分

(3)声明每个声明都要以分号(;)结束。

如:h1{color:red; } 中的 color:red;  部分就是一个声明

在一个声明块内,可以有多个声明,每个声明必须以分号隔开

(4)属性

如: h1{ color:red; } 中的color就是一个属性,每个声明只能有一个属性。

(5)注释

CSS的注释为:/*   注释内容  */

快捷键为:ctrl  + "/"

时间: 2024-10-12 18:37:49

CSS基础1——CSS样式表及样式规则的相关文章

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

css基础知识+css选择符(元素选择符、关系选择符)

首先我先介绍在html网页中怎么使用导入css样式的方法 1.行内样式:<p style="color:red">行内样式使用css</p> 2.页内样式:在head标签里设置 <span style="font-size:18px;"><head> <style> p{ color:red } </style> </head> <body> <p>页内使用c

css基础--常用css属性02

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向

样式表:样式背景,字体,对齐方式,边界边框。【0909下】

样式表: 样式;     大小:   width 宽度   height 高度 背景:    backyound—color  背景色 backyound—imahe   背景图片 backyound—repeat   背景图片的平铺方式 backyound—position    背景图片的位置 backyound—attachment    设置图片是否滚动 backyound—size    背景图片的大小. 比如:200px,200px 字体: font—familg   字体样式 fo

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

玩转HTML5+跨平台开发[8] CSS基础-体验CSS

CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对html的要求越来越大,人们迫切需要html增加新的元素,去完成一个特定的功能 迫于压力,html开始出现<font>,<i> , <s>等标签.但是html是一种描述结构的语言,也开始描述外在表现了.几年之后这种随便的做法暴露出严重的问题:1:由于html既写结构又写样式,导致

CSS基础之CSS的三大特性【重要】

一.继承性( Inherited ):给父元素设置的属性,子孙元素也可以使用. 应用场景:一般用于设置网页上的一些共性信息,文字大小.字体颜色等 注意点: 1.不是所有的属性都可以继承,只有以 color / font- / text- / line 开头的属性才可以继承. 2.继承性中的特殊性: a标签中的文字颜色和下划线,不能通过继承修改(不是亲生的) h标签中的文字大小,不能通过继承修改(不是亲生的) 二.层叠性:CSS处理冲突的一种能力 注意点: 层叠性只有在多个选择器中选择同一个标签,

样式表的样式

在样式表中写样式的时候,样式名的值跟在样式名后面用 : 隔开,每个样式名要用 ; 隔开,并且每个样式最好换行写,如: #b{ width:500px; height:200px; background-color:#00F; float:left; } 样式简介 1.大小, width  表示元素的宽,值可以是100px的数值,也可以是百分数, height 表示元素的高,值可以是100px的数值,也可以是百分数, 注意事项:基本上所有元素都能用width和height来定义大小,只有少数不可以