CSS Id 和 Class选择器详解编程语言
2023-06-13 09:11:43 时间
CSS 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 浏览器中不起作用。
示例代码:
!DOCTYPE html html head meta charset="utf-8" title css教程 /title style #para1 text-align:center; color:red; /style /head body p id="para1" Hello World! /p p 这个段落不受该样式的影响。 /p /body /html
效果:
二、class 选择器class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点 . 号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
示例代码:
!DOCTYPE html html head meta charset="utf-8" title css教程 /title style .center text-align:center; /style /head body h1 标题居中 /h1 p 段落居中。 /p /body /html
效果:
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 >
p.center {text-align:center;}
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
示例代码:
!DOCTYPE html html head meta charset="utf-8" title css教程 /title style p.center text-align:center; /style /head body h1 这个标题不受影响 /h1 p 这个段落居中对齐。 /p /body /html
效果:
16741.html
cjava相关文章
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 换行_css不允许换行
- 【CSS教程】紫色渐变登陆布局html+css代码
- 前端基础-CSS是什么详解编程语言
- SpringMVC中避免拦截css,js,html图片等静态文件详解编程语言
- HTML&CSS精选笔记_CSS高级技巧详解编程语言
- CSS 简介详解编程语言
- 纯CSS + 媒体查询实现网页导航特效详解编程语言
- CSS学习摘要-层叠和继承详解编程语言
- CSS常见兼容性问题总结详解编程语言
- CSS- 文本超出指定宽度后隐藏并显示为省略号详解编程语言
- 学习Html、css和Javascript中的常用标签英文缩写笔记(可供同学们参考)详解编程语言
- CSS学习笔记10 相对定位,绝对定位与固定定位详解编程语言
- CSS学习笔记03 CSS层叠性、继承性、特殊性详解编程语言
- CSS学习笔记02 CSS选择器详解编程语言
- CSS从大图片上截取小图标的操作详解编程语言
- CSS实现连续数字和英文的自动换行详解编程语言
- CSS 导航栏详解编程语言
- css input[type=file] 样式美化(input上传文件样式 )详解编程语言
- CSS 之 Opacity多浏览器透明度兼容处理详解编程语言
- css如何制作八边形详解编程语言
- css实现梯形详解编程语言
- css 完美垂直居中解决方案兼容ie8以上等其他浏览器详解编程语言
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)