初始CSS
一.什么是CSS
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二.CSS的作用
美化页面
三.如何将CSS加入网页
主要有三种方式
1.内联定义 (Inline Styles)
在html的开始标记内使用style属性定义适用标记样式表属性。
例如：
内联定义 css 内联定义 css
在html开始标记中添加style属性来设置该标记的样式
虽然内联定义添加css样式可以正常显示出样式信息，但是他的样式信息信息的设置被定义在html标记之中，这样会使得这个html标记变的很臃肿。所以我们一般不使用这种方式来设置样式。
2.定义内部样式块对象 (Embedding a Style Block)
在你的HTML文档的
标记之中插入一个标记表示一个内部样式块，标记可以在标记之中出现多次，出现一次就是一个独立的样式块。例：
内部样式块 内部样式块
在你的HTML文档的<head>标记之中插入一个<style></style>标记表示一个内部样式块。
可以在同一个样式块中同时修饰多个html标记【当需要被修饰的html标记是同一个模块的时候】
3.链入外部样式表文件 (Linking to a Style Sheet)
但当样式块过多的时候就会让原本html内容显得不重要，出现【喧宾夺主】的现象。所以需要大量的样式块的时候那我们就会创建一个独立于html以外的一个样式文件。即：在html文件中的head标记中，通过link标记将外部独立的css文件链接进html中。
步骤如下
创建独立的css文件
通过link标记连入
css/test1.css
#div1{width: 200px;height: 200px;background-color: red;
}
hr{width: 300px;
}
#div2{width: 300px;height: 300px;background-color: green;
}
Html文件
链入外部样式表文件 链入外部样式表文件
1.创建独立的css文件
通过link标记连入
<link rel=”stylesheet” type="text/css" href="独立的css文件路径" >
我们总结一下：
当样式信息不多的时候我们使用内部样块的方式引用css，当用大量的css信息时我们需要创建独立的css文件，通过link标记链接到html中，这样就可以做到分离。
无论我们是使用内部样块的方式还是通过link标记链接的方式来使用css，那么都需要学会编写css。
四.CSS的编写格式
1.什么是CSS选择器
CSS选择器--为类在众多的html元素中得到自己需要被添加样式的元素
选择器的优先级【内联 > ID选择器 > 类选择器 > 标签选择器】
具体样式设置信息如下
1.1属性名称:对应的取值
1.2具体样式信息“属性名称:对应的取值”可以出现多个，表示设置不同的样式信息，中间使用“;”分割，做好能够一个信息占一行。
#div2{width: 300px;height: 300px;background-color: green;}#div2---CSS选择器width: 300px;---具体的样式信息width---属性名称300px----属性名称对应的取值2.常用的CSS选择器
2.1 选择符 --- #ID { sRules } “#”就是id选择器的标志。
通过html文件中标记的id属性来选则html元素，这就需要我们在html标记中添加id属性。当html元素的id属性相同的时候，会被认为是同一组。
例：
html
css
#div2{width: 300px;height: 300px;background-color: green;
}
2.2 类选择符[class选择符] --- .className{sRules} “.”就是class选择器的标志。
通过html文件中标记的class属性来选则html元素，这就需要我们在html标记中添加class属性。当html元素的class属性相同的时候，会被认为是同一组。
例：
2.3 标签选择器---通过html元素名称类选中html标记。
2.4 包含选择符 E1 E2 { sRules }
选择所有被 E1[标签选择器/类选择器/ ID选择器] 包含的 E2 [标签选择器/类选择器/ ID选择器]
E1[标签选择器/类选择器/ ID选择器]---父元素
E2 [标签选择器/类选择器/ ID选择器]--子元素。
例：
- 姓名:zhangsan
- 年龄：23
- 地址:西安
- 姓名:zhangsan
- 年龄：23
- 地址:西安
div1
div2
2.5 子对象选择器 父 > 子 【只能选中子元素，子子元素不能选中】
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
- name：zhangsan
2.6 相邻选择器【+】，相邻+兄弟选择器【~】
p0
这是一个标题
p1
p2
p3
剩下的一些选择器，可自行熟悉
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！