前端入门学习笔记（二）之CSS入门_前端入门学习笔记(二)-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44931508/article/details/107872592

第1章什么是CSS以及CSS的使用

1.课程介绍

CSS基础入门：什么是CSS以及为什么要使用
CSS基础语法：CSS声明、规则、引入方式和命名规范等
CSS选择器：选择器、伪元素、伪类和选择器的优先级别等
CSS样式：背景、本文、链接、列表和表格等
CSS布局：三行两列、两行三列

2.定义

CSS指层叠样式表（Cascading Style Sheets）
1.CSS的重要作用是在不同的浏览器中显示相同的样式
2.解决html内容与表现分离的问题

第2章 CSS的声明、内外联样式以及CSS的优先级别

1.CSS声明

（1）CSS声明
background : #FFFFFF ;
样式属性操作符样式值分隔符
（2）CSS声明块
{
background-color:#FFFFFF;
color:#000000;
}

2.将CSS样式与HTML进行关联

引入选择器
div{
background-color:#FFFFFF;
color:#000000;
}

2.CSS声明的三种方法

（1）CSS的内联样式（详见代码）
-内联方式设置样式只对当前标签有效
-没有将标签内容和样式分离开来
-不建议使用
（2）CSS的外联样式一（详见代码）
-放在头文件中，不建议使用

（3）CSS的外联样式二（详见代码）
通过link与.css文件连接起来，常用
【注意】内联样式的优先级大于外联样式

第3章 CSS常见的选择器和CSS中的伪元素

1. CSS常见的选择器

(1)ID选择器
(2)元素选择器
(3)类（class）选择器
(4)属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* id选择器 */
        #p {
            color: lightcoral;
            font-weight: bold;
        }
        /* class选择器 */
        .myclass {
            color: lightgreen;
            font-weight: bolder;
        }
        /* 元素选择器 */
        span {
            color: lightblue;
            font-weight: normal;
        }
        /* 属性选择器 */
        [title] {
            color: lightgray;
            font-weight: lighter;
        }
    </style>
</head>
<body>
<p id="p">这是一个段落内容.</p>
<p class="myclass">这是一个段落内容.</p>
<span>这是一段文本内容.</span>
<p title="this is p.">这是一个段落内容.</p>
</body>
</html>

【注意】常用元素选择器和类选择器

2. CSS的其他的元素选择器

（1）CSS的后代元素选择器
A E：所有后代元素，不包括子元素和子元素的子元素
（2）CSS的子元素选择器
A > E ：仅仅包含儿子元素，不包括孙子元素
（3）CSS的相邻元素选择器
B+E :除了B的所有为E的兄弟元素

3. CSS的伪类和伪元素

（1）伪类

伪类	描述
:link	未被访问
:hover	光标悬浮在元素上方
:acitve	已被点击的元素
:visited	已经访问的链接，就是点完了松开了

（2）伪元素
在元素的前面或后面添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        q::before {
            content: "«";
            color: blue;
        }
        q::after {
            content: "»";
            color: red;
        }
    </style>
</head>
<body>
<q>一些引用</q>, 他说, <q>比没有好。</q>.
</body>
</html>