前端Day - 02

CSS三种样式

1. 行间样式表

块

2. 内部样式表

#div1{
    /*同一个页面id不能重名*/
    style="width:200px;height:100px;background:red"
}

3. 外部样式表

CSS基本样式

代码	意义	单位
width	宽度	px
height	高度	px
border	边框	width color style(solid dashed dotted)
background	背景	color url() repeat position attachment
font	文字	size weight(bold normal) style line-height family text-indent color text-align text-decoration line-spacing word-spacing
pading	内填充	px
margin	外边距	px

/*字体字号必须添加,否则文字样式会不生效
  文字右边会默认空出1像素
 不同字体空格所占用的字符大小是不一样的
可视宽 = boder+pading+width;
pading位于内容之外 边框之内 显示背景颜色
margin位于元素之外 不显示背景颜色 相邻元素之间的margin是会重叠在一起的 子元素margin会传递到父级元素
div默认中文下自动换行,英文状态下不会自动换行
*/

常用标签

超链接

显示文字

base标签

;

span标签

显示

其他常用标签

标签	名称	意义
	板块标签	板块标签
	头部标签	头部标签
	尾部标签	尾部标签
	加强标签	加粗文字
	列表标签	无序列表
	列表标签	有序文字
	列表项标签	一条列表项
	段落标签	修饰文字
	加强标签	倾斜文字

常用选择符及优先级

id选择器

/*类选择器可以同时支持多种样式*/

#id{
        width: 200px;
        height: 100px;
        background: red;
}

类选择器

/*类选择器可以同时支持多种样式*/

.name{
        width: 200px;
        height: 100px;
        background: red;
}

类型选择器

div{
        width: 200px;
        height: 100px;
        background: red;
}

包含选择器

.name{
        width: 200px;
        height: 100px;
        background: red;
}

群组选择器

div,span{
        width: 200px;
        height: 100px;
        background: red;
}

通配符选择器

*{
    width: 200px;
    height: 100px;
    background: red;
}

选择器的优先级

• 选择器的优先级一致时,后面的样式将会覆盖前面的优先级

行间样式>id>类选择>类型选择>通配

块和内嵌

块:1. 独占一行 2. 支持所有样式
内嵌:1. 可以一行显示 2. 不支持宽高,对margin padding支持也有问题 3. 宽度由内容撑起 4.代码换行会被解析

标签默认样式

常用标签默认样式