CSS初识

Posted 2022-05-25 5nbsp

2019/07/26 10:32:49

CSS:

1.语法由选择器和一条到多条声明组成规则集。

2.元素选择器下的声明会应用到当前文档中所有该元素。

    例：p
            color:green;
         
    注：所有段落字体颜色为green.

3. 类选择器会应用到所有拥有该类的元素。

    例：.stress
            font-size:21px;
        
        <span class="stress">
        <p class="stress">
    注：包含.stress属性值的都会改变字体大小。

4. ID选择器ID名具有唯一性。

    例：<span id="stress">
    注：只能有一个id名为.stress.

5. 编写规则：不要将多条声明写在一行。

    例：pcolor:red;fout-size:21px;backgronud:blue

6. 语义化结构标记（html5新增）:

标签名	含义
<header>	用于表示页面或某个区域的头部。
<nav>	用于表示导航栏。
<aside>	用于表示跟周围主题相关的附加信息。
<article>	用于表示文章或其他可独立页面存在的内容。
<section>	用于表示一个整体的一部分主题。
<footer>	用于表示页面或某个区域的脚注。

7. 文本元素：

标签名	含义
<h1>~<h6>	1级标题~6级标题
<P>	段落
<strong>	重要的文本（表示强调）在语义上是强调文本的重要性，因此它是将文本设置为粗体的最常见选项。
<b>	应突出显示的文本
<em>	强调的文本(斜体)
<i>	应区别对待的文本
<span>	跨越多个字符
<q>	小段文本的引用
<cite>	对参考文献的引用
<abbr>	对缩写词的引用
	例：<abbr title="全称">简写</abbr>
	例：<abbr title="Hypertext Markup language">html</abbr>
<blockquote>	整段的引用
<a>	链接
	<a href="打开的路径" target="从新的标签页打开">
	例：<a href="http://runoob.com" target="_blank">菜鸟</a>

8. 路径：

• 相对路径 link如果在同一路径下，直接填写文件名即可。
• 绝对路径 href必须填写完整的路径的文件名。 ../表示返回上一级目录 ./表示当前资源所在的目录（可以省略）

9. 编码特殊字符：

书写形式	含义
 	空格
©	版权 (一个圈圈一个C)
<	大于
>	小于
®	注册 (一个圈圈一个R ®)
&	&符号
乱数假文	Lorem ipsum

10. 颜色单位：

    h1
        color:white;
        color:#fff;
        color:rgb(255,255,255);
    
    长度单位
        一个尺寸是由长度+单位组成的
    绝对长度：px
    相对长度：em

11. *通配：匹配到当前文档的所有元素

12. 属性选择器

    [属性=值]
    [class=testclass]

13. 伪类选择器

    a:link(“未访问”)
            color:#000;
        
    a:visited(“访问后”)
            color:#ccc;
        
    a:hover(“移入”)
            color:red;
        
    a:acrive(“点击时”)
            font-size:30px;
        

14. 伪元素：可以给标签加字.(css3区分伪类和伪元素，将伪元素改为：：)

    ：first-letter 第一个字
    ：first-line 第一行
    a::beforecontent:"之前"
    a::aftercontent:"之后"

15. 组合选择器（并集选择器）

    h1,h2,h3,h4
        font-weight:normal;
    
    特点：形式不限，元素，类，id都可以选择

16. 子选择器

    ul>li （大于）表示子集选择器
    特点：用于选择指定标签元素的第一代子元素。

17. 后代选择器

    ul li （空格）表示后代选择器
    特点：用于选择指定标签元素下的所有后代元素。