css常用属性初总结第一弹:id和class选择器

前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉!

说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈。

类选择器:将html元素取一个响亮的名字,用class来标记,就可以使用类选择器了,如<p class="p1">这是段落1</p>,这里我将p元素class设置
为"p1",然后再写css样式就可以直接使用了,

举个栗子:

<style type="text/css">
p.p1{color:red;}
</style>

</head>
<body>
<p class="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

运行上一段代码,就将类名为p1的p元素的文字颜色设置为红色了,是不是很简单,说明一下,非p元素的类名为p1时没有效果哦,要想所有
的class类名为p1的元素有效果,则需要把前面的结构元素名去掉。现在的项目都是敏捷开发,所以用类名就得小心了,刚开始大家经常抱怨的
就是类名冲突,结果就是样式相互冲突了,所以我们项目上定下了约定,以页面功能来命名类名,从而避免类名冲突。

另外要提一下的就是多类名:如上面的

<p class="p1 center">
This paragraph will also be center-aligned.
</p>

一个class值中是可以有一个此列表了,各个词之间用空格来分开。然后写样式就一个个写就ok了,这里估计会有人会问:如果多个类之间有
相同的css样式会出现什么情况!这里就要阅读后面的有关css层叠的问题了!今天的文章就到这里了,第一次写的可能语无伦次,可能是想到
什么就写什么,期待以后慢慢提高吧!

时间: 2024-11-09 08:34:58

css常用属性初总结第一弹:id和class选择器的相关文章

#3 CSS常用属性

CSS里面的样式非常多,但是常用的样式并不是很多. 下面主要是以下常用的,当然这个没涉及到考虑兼容性的问题.兼容性的主要还是要了解不懂浏览器之间的差异,具体我也半桶水,在努力学习中,等学会了,在总结一下分享给大家. -------2014.07.29 这个上课主要讲的布局,就是关于页面的布局,现在90%的网站都是用DIV+CSS布局的.所以应该好好掌握这次课的知识. 在学习DIV之前,我们还要熟悉一些常见的CSS样式. CSS的常用样式 字体: 1,line-height:50px      

HTML常用标签汇总、CSS常用属性汇总

标签名 属性 及其取值 作用 单词意思 <a> href:超链接url地址 target:_blank(规定页面在新窗口打开) _self(规定页面在本窗口打开) _top(使文档载入包含此链接的窗口) _parent(使文档载入父窗口或者包含来链接引用的框架的框架集) 插入超链接 超链接 <base> href: 链接规定默认地址 target: 页面打开方式,取值同<a>的target 规定页面上的所有链接规定默认地址或默认目标. 基础 <b>   加粗

CSS常用属性和值

下载高清图:css常用属性和值(思维导图总结) 1.字体 <html> <head> <title>font</title> <style> h1{ font-family:times,courter; font-size:150% font-style:italic; font-variant:normal; font-weight:normal; } h2{ font-family:serif,times; font-size:1cm; fo

第五章-css常用属性

第五章 CSS常用属性 1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold(加粗) font-familty:字体类型(楷体) font:样式 粗细 字体大小 字体类型. 3.文本样式 color: 文本样式 text-align: 水平对齐方式(left,center,right) text-indent: 首行缩进 line-height: 行高

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

7.css常用属性

1.文本属性 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一

初学css常用属性整理

CSS常用样式属性 整理了一些之前刚学CSS时的一些基本的样式属性,另外在使用时还要注意一下CSS里 选择符的权重(id-#=100 , class-.=10 直接指定标签=1). 字体.颜色.背景属性 font-size  ------字体大小(**px,**em) font-family       ------字体类型(微软雅黑,黑体,楷体等) font-weight      ------字体粗细(bold粗体,也可直接输入100-900数值) font-style         --

HTML常用标签及css常用属性

HTML hyper text mark up language 扩展名是.html title : 标题标签body : 内容标签 h1 - h6 : 标题标签 自h1 到 h6 从大到小 加粗有自己的间距 p : 段落标签 字符实体 :   空格 > 大于 &lt: 小于 br : 换行 规范写法 <br /> div : 块标签 ,表示一块内容 并没有语义 span : 行便签 , 表示一行中的内容 这两个的作用为设置样式的时候使用 行内元素 ,语义标签em : 语气强调词

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&