HTML+CSS+JavaScrip
[没看这个,但是写完之后发现这个好全]((8条消息) CSS入门学习笔记+案例_itboy-CSDN博客)
什么是CSS
学习方法
- CSS是什么
- CSS怎么入门
- CSS选择器(重点)
- 美化网页(文字,阴影,超链接、列表…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效)
什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体,颜色,
CSS 发展史
1.0
2.0 DIV+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
2.1 浮动、定位
3.0 圆角、阴影、动画…浏览器兼容性
狂神说这个是标准形式
快速入门
<link rel="stylesheet" href="css/c1.css">
css和html连接方式
多建议css样式代码和html代码分开写
css优势
-
内容和表现分离
-
网页结构表现统一,可以实现复用
-
样式十分丰富
-
建议使用独立html和css文件
-
利用SEO容易被搜索引擎收录
CSS的3中导入方式
- 行内样式 在标签原书中编写一个样式属性
<h1 style="color:red">标题</h1>
优先级:就近原则
外部样式幽两种写法
-
@import
选择器
作用:选择页面上的某一个或某一类元素
基本选择器
-
标签选择器:选择页面上的所有同标签的内容
<style> h1{ background:red } </style> <h1 class="ar">标题</h1>
-
类选择器 class:跨标签
.class名称:可以多个标签归类,不用单独设形式,可设置相同的类,跨标签实现
<style> .ar{ background:#121212 } </style> <h1 class="ar">标题</h1>
-
id选择器:全局唯一
#id名称 id不能多个同id,只能单独一个保证唯一性
三种的优先级
id选择器>class选择器>标签选择器
层次选择器
-
后代选择器
/*后代选择器*/ body p{ background:red; }
-
子选择器
body>p{ background: yellow; }
-
相邻兄弟选择器
.a+p{ background: yellow; }
.class名+相邻的标签(向下相邻)
-
通用选择器
.class~标签名(选中元素向下的所有标签)比第三个好用
.a~p{ background: yellow; }
结构 伪类选择器
<style>
/*ul的第一个子类元素*/
ul li:first-child{
color:red
}
/*ul的最后一个子类元素*/
ul li:last-child{
background:yellow}
/*定位到父元素,选择当前的第一个元素
选择当前p远胜于的腹肌原色,选中父级元素的第一个,并且是当前元素才生效*/
p:nth-child(2){
background: #2755ff
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(1){
background: blue}
</style>
属性选择器
-
选中包含id属性的a元素:
```html a[id] { background-color: #fff; } ```
-
选中id为AAA属性的a元素:
a[id="AAA"] {
background-color: #fff;
}
- 选中href属性可以包含www.baidu的a元素:
a[href~="www.baidu"] {
background-color: orange;
}
- 选中href属性以world单词开头的a元素,该值必须包含整个world:
a[href|="world"] {
background-color: orange;
}
- 选中href属性以https开头的a元素:
a[href^="https"] {
background-color: orange;
}
- 选中href属性以.com结尾的a元素
a[href$=".com"] {
background-color: orange;
}
- 选中href属性包含baidu的a元素:
a[href*="baidu"] {
background-color: orange;
}
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾