CSS笔记 第一天

1.css样式表 style

css三大特性：

层叠性、

解决样式冲突问题。遵循就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突不会层叠。只覆盖冲突的样式。

div{
color:red;
font-size:16px;
}
div{
color:pink;
}

继承性、

子标签会继承父标签的某些样式，eg：文本颜色和字号。（子承父业）(text-,font-,line-元素开头的，以及color属性)

div{
color:red;
font-size:16px;
}
​
<div>
<p>aocoahoahovh</p>
</div>

优先级

优先级：行内>内部>外部

选择器（给谁改）{

属性：属性取值；（改成什么样）

}

1.1外部样式 链接式

优点：复用性强

1. 创建一个css文件

2. 写入的内容：选择器{属性：属性值}

3. 链接到css文件

<link rel="stylesheet" href="···.css">

<!-- rel：描述当前页面与href所指定文档的关系，外部样式表，href所指向的文档 -->

1.2内部样式 嵌入式

1. 写在style标签中

2. 少量样式代码时使用

3. 优先级整体比外部高

 <style>
        p{
            font-size:30px;color:blue;
        }
    </style>

<!-- 内部样式段落p间：字体像素30 --> <!-- 行内样式>内部>外部 -->

1.3行内样式 行内式

1.优点：权重高，精准

2.缺点：代码冗余，效率低下，不可复用，扩展性差，难以优化

<p style="font-size:100px;></p>

<!-- 注释标签 -->

标签可以接受属性设置

<a href="#title1">111</a>
<a href="#title2">222</a>
<a href="#title3">333</a>

<!-- 网址超链接，可以点击，链接到title1/2/3-->

<p id="title1">
    第一段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.
这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。
</p>

<!-- <p></p>:是段落,第一段id地址链接是title1-->

<p id="title2">
    第二段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.
这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。
</p>
<p id="title3">
    第三段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.
这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。
</p>

<p style="border:1px solid red; color: violet">
    第四段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.
这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。
</p>

<!-- <p style="border:1px solid red; color: violet"></p>行内样式，边框1像素，边框颜色红色；字体颜色：粉色 -->

<p style="color:red;">    第五段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。</p>
<p>    <i>第六段This universe is not outside of you. Look inside yourself. Everything that you want, you are already that.        这宇宙并非在你之外，看看自己的内心吧，所有你需要的，已然在那儿了。</i></p>