CSS基础教程

2019年9月7日 72次阅读 来源: LeoHsiun

CSS简介

CSS概述

  • CSS指层叠样式表（Cascading Style Sheets）
  • 决定HTML元素如何显示
  • 内容与样式分离
  • 多个样式定义可层叠为一

层叠次序

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

CSS基本语法

CSS语法结构

《CSS基础教程》

CSS高级语法

选择器的分组

h1,h2,h3,h4,h5,h6 {
  color: green;
}

继承

body  {
     font-family: Verdana, sans-serif;
}

<!-- 继承body中的属性 -->
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
}

<!-- 重写从body中继承的属性 -->
p  {
     font-family: Times, "Times New Roman", serif;
}

派生选择器

<!-- 只有h2标签中的strong才会是蓝色-->
h2 strong {
     color: blue;
}

id选择器

<!-- id选择器 -->
#sidebar {
    border: 1px dotted #000;
}

<!-- 利用id创建派生选择器 -->
#sidebar h2 {
    font-size: 1em;
}

类选择器



<h1 class="center"></h1>



.fancy {
    color: #f60;
}

.fancy td {
    color: #f60;
}

td .fancy {
    color: #f60;
}

td.fancy {
    color: #f60;
}

属性选择器


{
    color:red;
}



{
    border:5px solid blue;
}

input[type="text"]
{
  width:150px;
}

CSS创建

外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

<head>
<style type="text/css">
  p {margin-left: 20px;}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
    原文作者：LeoHsiun
    原文地址: https://segmentfault.com/a/1190000002619128
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞