CSS简介

7. CSS入门 - 图1

  1. p{
  2.     background-color:red;
  3.     border:1px solid gray;
  4.     //粗细为1px，灰色，实线
  5.     }

CSS放入HTML

  1. <html>
  2.     <meta charset="utf-8">
  3.     <title>Ryan</title>
  4.     <style>
  5.     //这里放CSS样式
  6.     </style>

把代码放在style中

<html>
    <meta charset="utf-8">
    <title>Ryan</title>
    <style>
    p{
        color:maroom;//茶红色
    }
    </style>

标题修改样式

h1{
    font-family:san-serif;
    color:gray;
    }
h2{
    font-family:san-serif;
    color:gray;
    }
p{
    color:maroom;
}

可以合并得到：

h1,h2{
    font-family:san-serif;
    color:gray;
    border-bottom:1px solid black;
    //h1,h2下边框，粗细为1像素，黑色，实线
    }
p{
    color:maroom;
}

如果只h1增加边框的话可以

h1,h2{
    font-family:san-serif;
    color:gray;
    border-bottom:1px solid black;
    //h1,h2下边框，粗细为1像素，黑色，实线
    }
h1{
    border-bottom:1px solid black;
    //h1,h2下边框，粗细为1像素，黑色，实线
    }

p{
    color:maroom;
}

CSS代码

7. CSS入门 - 图2
选择器{元素+样式}

7. CSS入门 - 图3%0Ahtml%20-%3E%20(head)%3A%E5%8F%AA%E5%AF%B9body%E4%B8%8B%E5%85%83%E7%B4%A0%E5%BA%94%E7%94%A8%0A(body)%20—%3E(h1)%3A%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%B9%E9%85%8Dh1%2Ch2%0A(body)%20—%3E(p)%0A(body)%20—%3E(P)%0A(body)%20—%3E(h2)%0A(P)—%3E(img)%0A(P)—%3E(a)%0A(p)—%3E(em)%0A%0A%0A%40enduml#card=puml&code=%40startuml%0A%0Ahtml%20-%3E%20%28body%29%0Ahtml%20-%3E%20%28head%29%3A%E5%8F%AA%E5%AF%B9body%E4%B8%8B%E5%85%83%E7%B4%A0%E5%BA%94%E7%94%A8%0A%28body%29%20—%3E%28h1%29%3A%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%B9%E9%85%8Dh1%2Ch2%0A%28body%29%20—%3E%28p%29%0A%28body%29%20—%3E%28P%29%0A%28body%29%20—%3E%28h2%29%0A%28P%29—%3E%28img%29%0A%28P%29—%3E%28a%29%0A%28p%29—%3E%28em%29%0A%0A%0A%40enduml&id=159a1cd5)

CSS链接外部文件

<html>
    <head>
        <meta charset="utf-8">
        <title> Test </title>
        <link type="text/css" rel="stylesheet" href="style.css">

7. CSS入门 - 图4
其他页面利用相对路径添加
7. CSS入门 - 图5

继承

  • 在body处添加样式可以在各元素中使用
  • 若要覆盖继承在相应元素中进行修改即可覆盖

类

为html中添加class类属性，<p class="lei">
在css中修改类选择器

p.lei{
    color:green;
}

同理

<blockquote class="lei">

blockquote.lei p.lei{
    color:green;
}

为了方便可以写成：

.lei{
    color:green;
}

同时，一个元素可以有多个类：
<p class="blue yellow red">

7. CSS入门 - 图6