css(1-1)样式表

CSS Id 和 Class


id 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。


id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

#para1
{
text-align:center;
color:red;
}

尝试一下 ?

 ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。


class 选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

实例

.center {text-align:center;}

尝试一下 ?

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center {text-align:center;}

尝试一下 ?

 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

时间: 2024-10-07 05:28:10

css(1-1)样式表的相关文章

Css3之基础-1 Css 概述、样式表使用方式、语法规范

一.CSS 概述 CSS概述 - CSS作用 CSS概念 - CSS (Cascading Style Sheets): 层叠样式表,又叫级联样式表,简称样式表 - 用于 HTML 文档中元素的样式定义 - 实现了将内容与表现分离 - 提高代码的可重用性和可维护性 CSS与HTML之间的关系 - HTML 用于构建网页的结构 - CSS 用于构建 HTML 元素的样式 - HTML 是页面的内容组成,CSS是页面的表现 HTML 属性与CSS样式的使用原则 - W3C 建议尽量使用CSS样式取代

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

css选择器,样式表导入

css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 *{} 页面上所有元素应用样式,利用此可以删除每个元素上默认 浏览器的填充和空白边.可以用来对特定元素的所有后代应用样式,或跳过一级后代 f.伪类选择 a:link{} g.高级选择器 IE6及更低版本不支持,避免在对于站点功能重要的使用高级选择器. 1.子选择器和相邻同胞选择器 子选择器选择元素

Normalize.css重置化样式表

Normalize.css是一种CSS reset的替代方案.它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案(https://necolas.github.io/normalize.css/7.0.0/normalize.css) 创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug

CSS层叠样式表——定义样式表

定义样式表 1  HTML标记定义 <p>...</p> p{属性:属性值:属性1:属性值1} p可以叫做选择器,定义那个标记中的内容执行其中的样式 一个选择器可以控制若干个样式属性,他们之间需要用英语";"隔开,最后一个可以不应加 2  Class定义 <p class="p">...</p> class定义是以"."开始 .p{属性:属性值:属性1:属性值1} 3  ID 定义 <p id

css样式表

样式表主要分为三类:内联式.内嵌式和外部样式表. 内联式样式表是跟html联合显示,写在body标签里边,属于控制精确,但是可用性差.在三种样式中会优先显示作用. 内嵌式是作为独立区域写在head标签里边.body标签中有对应的标签:<div id/name/class="  "></div>. 外部样式表是新建一个css文件,用来放样式表,在html中用link链接. <link type="text/css" rel="s

css样式表1 2017-03-11

样式表 DIV + CSS 一.        样式表的分类 以下均以div标签为例,可以换成其他标签 1.  内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3:属性3.1 属性3.2 属性3.3" -------注意哪个用冒号哪个用分号  什么时候用空格 <div style="width: 500px; height: 100px; border:1px  solid  black"> </div> 注:优先级

CSS样式表初学,比C#和JS简单

今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS CSS:层叠式样式表 HTML:超文本标记语言 HTML是负责展示你的网页上都有什么内容,都有什么 CSS是负责你的网页上的内容都怎么摆布,什么样的格局 那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想 那我要是告诉你一种

使用CSS样式表方法绝对居中定位DIV浮动层

有什么简单的方法绝对居中定位DIV浮动层?答案用CSS怎么写样式表就可以了.下面的写法兼容IE系列浏览器和火狐浏览器. 详细解说,直接看样式: #dingwei{padding:10px;color:#FFFFFF; width:600px;height:300px; display:block; position: absolute; top:50%; left:50%; margin-left:-300px; margin-top:-150px;} padding:10px;color:#F

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css