学习CSS初识

作者: 小猪Harry | 来源:发表于2018-06-20 06:58 被阅读0次

CSS基础学习（一）- 初识CSS与学习准备
学习CSS初识
01-csc初识
css笔记
2018-08-25
CSS_基础
2018-03-29
CSS(一) 邂逅
CSS相关---基础选择器
初识CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <style>
        h1{
            font-size: 200px;
            color: #F00;
        }
        .abcd{
            font-size: 100px;
        }
        #kkk{
            font-size: 60px;
        }
    </style>
</head>
<body>
<h1>钢铁侠</h1>
<p class = "abcd">大家好，我是钢铁侠！</p>
<p id = "kkk">I am iron man!</p>
</body>
</html>

标签选择器

HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>

类选择器

<标签名 class= "类名称">标签内容</标签名>

ID选择器

<标签名 id= "id名称">标签内容</标签名>

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

后代选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <style>
        .abcd strong{
            font-size: 100px;
        }
    </style>
</head>
<body>

<p class = "abcd">大家好，我是<strong>钢铁侠！</strong></p>

</body>
</html>

交集选择器

由两个选择器直接连接构成，选中二者各自元素范围的交集
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
选择器之间不能有空格，必须连续书写

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <style>

        p.abcd{
            color: blue;
        }

        h1,.abcd,#kkk{
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>

<p class = "abcd">大家好，我是<strong>钢铁侠！</strong></p>
<h1>钢铁侠</h1>
<p id = "kkk">我是美国队长！</p>

</body>
</html>

行内样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

外部样式表

在CSS文件中：
p{
    color: blue;
}

在HTML文件中：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link href="first style.css" rel="stylesheet">
</head>
<body>
    <p>
        大家好，我是钢铁侠！
    </p>
</body>
</html>

CSS继承风格

子标签可以继承父标签的样式风格
子标签的样式不会影响父标签的样式风格

CSS优先级

ID选择器>类选择器>标签选择器

在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

应用important

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red!important;}         
    .first{color:blue;}   
</style>
</head>
<body> 
      <p class="first" id="pid" style="color:green">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p>
</body>
</html>