CSS三种样式

1. 行间样式表

<div style="width:200px;height:100px;background:red">块</div>

2. 内部样式表

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

3. 外部样式表

<link rel="stylesheet" href="链接文件地址"/>

CSS基本样式

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

常用标签

超链接

<!-- _blank新标签页打开,_self本标签页打开 -->
<!-- a标签的样式需要单独设置样式 -->
<!-- a标签不可以再嵌套a标签 -->
<a href="页面地址\锚点\压缩包" target="_blank">显示文字</a>

base标签

<base href="http://wwww.baidu.com" target="_blank">;

span标签

<!-- span标签和a标签都是不换行的 -->
<span id="span1">显示</span>

其他常用标签

常用选择符及优先级

id选择器

/*类选择器可以同时支持多种样式*/
<div id="nam"></div>
#id{
        width: 200px;
        height: 100px;
        background: red;
}

类选择器

/*类选择器可以同时支持多种样式*/
<div class="name name2"></div>
.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.代码换行会被解析

标签默认样式

常用标签默认样式