普歌-飞灵团队-HTML+CSS知识点总结

一.css三种引入方式

1.内联式

<p style="color:red;">
    文本颜色
</p>

2.嵌入式

<style type="text/css">
    h3{
        color:blue;
    }
</style>
<h3> 我是蓝色</h3>

3.外部式

<link rel="stylesheet" type="text/css" href="test.css">
<h4>ppppp</h4> 
<p1>rrrrrnrnr</p1>

h4{
color:crimson;
font-size:small;
}
p1{
font-weight:initial;
color:crimson;
font-size:50px;
}

注意：
优先级：内联式>嵌入式>外部式
（前提：谁在后面就用谁 link要在style的后面）

二.css选择器

格式：

选择器{
      样式；
}

1.基础选择器
• 标签（元素）选择器
对页面中相同的元素，设置共同的属性。
• 类（class）选择器
（1）任何的元素都可以设置类。
（2）一个元素中可以设置多个类。
（3）一定要有“归类的概念，公共类的想法”。选中的页面元素，设置相同的属性。
• id（身份证号）选择器。
（1）任何的元素都可以设置id。
（2）Id是唯一的，不能重复。表示选中的是有特性的元素。
2.高级选择器
• 后代选择器（爸爸的儿子，孙子…）
div p{}
• 子代选择器（亲儿子）
div>p{}
• 组合选择器
选择器1,选择器2,选择器3{}
• 交集选择器
选择器1选择器2{}
• 伪类选择器
如：a标签
a:link{}
a:visited{}
a:hover{}
a:active{}
注意: :hover可以应用于任何元素。
3.权重
id选择器 >类选择器 >标签选择器

三.css中元素分类

1.块级元素

<div> <ul> <ol> <p> <h> <table> <form>

特点：
（1）独 占 一 行
（2） 可 以 设 置 宽 高 ， 如 果 不 设 置 宽 度 ， 默 认 是 父 标 签 的 100 ％ 宽 度
2. 行内元素

<a> <span> <strong> <em> <label>

特点：
（1） 在 一 行 内 显 示
（2）不 能 设 置 宽 高 ， 默 认 的 宽 高 为 文 本 内 容 占 据 的 宽 高
3. 行内块元素（隶属于行内）

<input> <img>

特点：
（1） 在 一 行 内 显 示
（2） 可 以 设 置 宽 高

———————————————————————————————————————
作者：wx_mz
出处/源自：wx_mz的《普歌-飞灵团队-HTML+CSS知识点总结》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。