CSS的引入方式
CSS的选择器
CSS选择器进阶
CSS选择器的优先级
CSS的伪类选择器
## 内容回顾:
1.h1~h6:加粗,数字越大级别越小,自动换行
2.br:换行; hr:分割线; & nbsp ;(特殊符号,空格)
3.p:与前边和后边内容之间有间距
4.a标签的href:本地文件连接;网络连接;锚链接
target:_blank另期页面,默认是自己页面
name:主要为了设置锚链接的锚点
5. img图片,src:本地文件地址和网络地址
- alt:图片损坏时给的提示
- align:图片的对齐方式
- title:鼠标悬浮时提示的文字
- width:宽度
- hight:高度
6.ul:无序列表,内部能包裹li,type更改显示的样式,默认是实心圆,还可以更改为空心圆(circle)和正方块(square)
7.有序列表,内部能包裹li,type类型,默认是阿拉伯数字,可更改为大小写字母,还可以更改为罗马文字
start,序号起始位置
8.dl定义列表,dt,dd*5 tab一下就出来了,pycharm帮我做的.
9table表格标签,border:边框类型;bordercolor:边框颜色;bgcolor:背景颜色;background:被禁图片,宽高,align:对齐方式;style="border-collapse:collapse"让表格的线条变成实心线.
tr代表一行
td代表一行内的一个单元格;rowspan:纵向合并;colspan:横向合并.
10.form表单;action:对应要提交的网络地址;method:get和post两个方法,默认是get.
input的类型们
- text普通文本输入框
- password,密文文本输入框
- checkbox,多选框,多用来服务条款点那个对号
- radio,单选,多用于选择性别,name得统一才能实现单选
- file,文件上传按钮
- date,日期选择框
- submit:form表单提交数据时候用它
- button:普通按钮
- image:一个图片,自带submit,src(王瑞东)=图片地址.
- select:下拉菜单,更改下拉菜单的多选multiple,size
- option下拉的每一个选项,默认选中此选项用selected
- textarea:文本输入框,可改变大小.
## 内容详细
1.div
是块儿级标签,是嫖老师的最爱,因为他灰常单纯,什么都没有,想捏成什么样就捏成什么样
块级标签内的文本,超过了块的宽度则会自动换行,但是如果是长英文没分割的字符串,不会换行,会溢出
2.span
是行级标签,嫖老师设置的样式特别是宽高,不显示了,并不是你想怎么样就怎样
一个行内的宽高和背景大小由填充的内容决定.不管内容多少,都不会溢出.
3.行内块
可以设置宽高,不自动换行.
在一行内显示,而且可以设置宽高
一个底边对齐的现象
img图片标签
input输入框
textarea文本输入区域
4.都在一行内的标签--简称为行内标签
不能设置宽高,不自动换行,同时具备
a标签
span标签
b标签 strong标签
em标签,i标签
u标签,del标签
5.不在一行内的标签-- 块级标签
可以设置宽高,可以自动换行同时具备才叫做块级标签
p
h1~h6
table
列表:ol;ul;dl
div
其他:不在上边三类里的.
form标签 不算,它是一个容器,容器内放了很多标签,他自己有自己的属性.
br
hr
==================================================================
## CSS的简介
cascdaing style sheet 层叠样式表,简称CSS
层叠:通过CSS的属性等把页面层叠起来
样式:设置页面每一块的样式
表:页面排版
## CSS的书写方式
方式一:行内式,在标签中直接书写
优点:肯定不会选错标签
缺点:代码冗余,且修改不方便
方式二:一个页面内接入的,称为内接式
书写在head里的style标签里
优点:修改方便,直观.
缺点:关联性太强.如果写错变量名可能会酿成大祸.
方式三:外接式
导入方式:利用link标签导入
优点:协同开发,不同类型的代码分文件存放
缺点,文件出问题或者丢了,页面就塌了.
## CSS基本选择器
基本选择器中的标签选择器
通过标签名直接就可以选择到标签,页面中所有符合选择条件的标签都会被选择.
id选择器:常涛
通过#号找到id
id不能以数字开头
指哪打哪,因为id是唯一的
类选择器
通过.找到类名
类名可以重复
类一般值的同一群相同属性的统称.
通配符选择器
用*号操作所有标签
使用场景:删除边框
```css
* {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
```
CSS的优先级
- 标签选择器层级一致的时候,从上往下,以下边的为准
- 类的选择器的优先级大于标签选择器
- 通过id找到的具有唯一性,优先级最高
- 行内样式的设置优先级最高
- 继承的样式优先级是最低的s
## CSS的高级选择器
后代选择器
```
/* 后代选择器 */
body li {
color: red;
}
```
子代选择器
```
/*!* 子代选择器 *!*/
body ul > p {
color: green;
}
```
弟弟选择器
```
/*!* 弟弟选择器 *!*/
h1 ~ h2 {
color: pink;
}
```
毗邻选择器
```
/*!* 毗邻选择器 *!*/
h1 + h2 {
color: #cc6600;
}
```
组合选择器
```
/* 组合选择器 */
h1 ~ h2, li, h1 {
color:darkviolet ;
color: green;
}
```
伪类选择器
a标签的四个形态:爱恨准则 LoVe HAte
```html
<style>
/* 爱恨准则LoVe HAte */
a:link {
color: green;
}
a:visited {
color: blueviolet;
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
</style>
<body>
<a href="http://www.jd.com">a标签未被点击时的形态link</a><br>
<a href="#">a标签被点击时的形态</a><br>
<a href="#">a标签点击完毕时的形态</a><br>
<a href="#">a标签悬浮时的形态</a><br>
</body>
```
伪元素选择器
```HTML
<style>
/* 在文本之前添加内容 */
div:before {
content: "SB";
}
/* 在文本之后添加内容 */
div:after {
content: "翔";
}
/* 文本的第一个字母发生变化 */
div:first-letter {
color: green;
}
/* 文本的首行发生变化 */
div:first-line {
color: #cc6600;
}
</style>
<div>alex吃...</div>
```
注意:伪元素选择器,仅仅适用于块级标签.
