css-基础知识

1.CSS介绍：

定义如何显示HTML元素，

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

2.CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

3.cSS如何引入?

1. 直接写在标签里面 style="样式1;样式2;"
2. 在head中通过style标签定义
3. 把样式单独写在css文件中,然后在html文件中通过

4. 引入方法举例：

<head>
    <meta charset="UTF-8">
    <title>css引入示例</title>
    <!--第一种样式引入：link推荐使用此方式-->
    <link rel="stylesheet" href="css.css">
    <!--第二种样式引入：style-->
    <style>
        p {
            color: deeppink;
        }
    </style>
</head>
<body>
<!--第二种样式引入:行内样式sytle引入 在标签中直接定义-->
    <p style="color:deepskyblue">天蓝色的河流</p>

5.css选择器

5.1基本选择器：

元素选择器：
        p {color: "red";}
ID选择器：
        #s1{
    color: green;
}

类选择器 ：
对所有cl类都更改样式
.cl{
    color:hotpink;
}
标签.cl  表示只对标签u下面的类更改样式
u.cl{

    color:blue;
}
类选择器，继承不同的类
.cc{
    color:yellowgreen;

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

5.2通用选择器

* {
  color: white;
}

5.3组合选择器

后代选择器：
/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器：
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器：
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

5.3组合选择器

猜你喜欢