CSS基础教程

最新推荐文章于 2024-06-17 22:09:44 发布

weixin_34183910

最新推荐文章于 2024-06-17 22:09:44 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000002619128

本文介绍了CSS（层叠样式表）的基本概念，包括其作用、语法结构、选择器使用及样式定义方式。讨论了CSS如何实现内容与样式的分离，并通过实例展示了层叠次序、继承、派生选择器等特性。

CSS简介

CSS概述

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

层叠次序

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

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;
}

属性选择器

[title]
{
    color:red;
}

[title=W3School]
{
    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>