CSS学习笔记 -- day01 CSS简介、常见属性、基础选择器
2017-08-01 17:49
761 查看
一、CSS整体感知
1、解释
css是cascading style sheet 层叠式样式表的简写。2、图片示例
type表示“类型” , text就是“纯文本”。css也是纯文本的。注意:
我们写css的地方是style标签,就是“样式”的意思,写在head里面。
css对换行不敏感,对空格也不敏感。但是一定要有标准的语法。冒号,分号都不能省略。
二、CSS常见的属性
1、字符颜色
color:red;
color属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制
2、字号大小
font-size:40px;
font就是“字体”,size就是“尺寸”。px是“像素”。单位必须加,不加不行。
3、背景颜色
background-color: blue;
4、加粗
font-weight: bold;
font是“字体” weight是“重量”的意思,bold粗。
5、不加粗
font-weight: normal;
6、斜体
font-style: italic;
7、不斜体
font-style: normal;
8、下划线
text-decoration: underline;
9、没有下划线
text-decoration:none;
三、基础选择器
1、标签选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> span{ color:red; } </style> </head> <body> <h1>前端与移动开发<span>1期</span>基础班</h1> </body> </html>
注意:
所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input
无论这个标签藏的多深,一定能够被选择上
选择的所有,而不是一个。
标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。
2、id 选择器
id选择器的选择符是“#”。任何的HTML标签都可以有id属性。表示这个标签的名字。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #para2{ color:red; } </style> </head> <body> <p>我是段落1</p> <p id="para2">我是段落2</p> <p>我是段落3</p> </body> </html>
注意:
1) 只能有字母、数字、下划线
2) 必须以字母开头
3) 不能和标签同名。比如id不能叫做body、img、a
4)这个标签的名字,可以任取,但是:一个HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!
5)一个标签可以被多个css选择器选择,共同作用,这就是“层叠式”的第一层含义。
3、类选择器
. 就是类的符号。类的英语叫做class。所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性。class属性可以重复。
(1)、页面上可能有很多标签都有teshu这个类:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.teshu{
color: red;
}
</style>
</head>
<body>
<h3>我是一个h3啊</
4000
h3>
<h3 class="teshu">我是一个h3啊</h3>
<h3>我是一个h3啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
</body>
</html>
(2)、同一个标签,可能同时属于多个类,用空格隔开:
<h3 class="teshu zhongyao">我是一个h3啊</h3>
h3 就同时属于 teshu 类,也同时属于 zhongyao类。
(3)、总结:
1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
(4)、到底用id还是用class?
答案:尽可能的用class,除非极特殊的情况可以用id。
原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。
相关文章推荐
- CSS学习笔记1:初识CSS及其常见属性
- CSS学习笔记2:CSS基础选择器
- HTML&CSS基础学习笔记1.34-通用选择器
- HTML&CSS基础学习笔记1.30-选择器是什么
- CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- HTML+CSS基础课程学习笔记-第一章HTML简介
- HTML&CSS基础学习笔记2-Html的全局属性
- HTML&CSS基础学习笔记1.32-选择器是什么
- css学习笔记20160130导航栏下拉菜单图像拼合媒体类型属性和值选择器
- # html+css基础学习笔记-选择器介绍
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- 《Web编程入门经典》学习笔记 - Lesson01:创建结构化文档:XHTML简介、核心元素、属性组与基本文本格式
- CSS基础教程--简介笔记
- css学习笔记之选择器
- 黑马程序员之WinForm编程基础学习笔记:省市选择器
- CSS学习笔记(五)CSS 类选择器
- C#学习笔记8:HTML和CSS基础学习笔记
- puppet核心资源类型及其常见属性学习笔记
- css基础知识学习笔记
- XNA 学习笔记(1.基础 : 常用的一些属性)