web技术：CSS基础知识

最新推荐文章于 2024-09-12 02:32:59 发布

Liu Weidong

最新推荐文章于 2024-09-12 02:32:59 发布

阅读量129

点赞数

文章标签： css css3

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u010019244/article/details/105280196

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介

CSS指层叠样式表 (Cascading Style Sheets)。
CSS语法由两个主要的部分构成：选择器（HTML元素），以及一条或多条声明：

/*添加注释*/
selector, ...selector5 {
  property: value;
  ...
} 

p {
  color: red;
  text-align: center;
}

标签选择器：A {}
id选择器：#name {}
类选择器：.name {}
派生选择器：A B {}
.name A {} 或 #name A {}
属性选择器：[属性] {}、[属性=xxx] {}、[属性~=xxx] {}
A>B {}
通用选择器：* {}
相邻选择器：A+B {}
A~B {}

CSS的创建

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
外部样式：

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

内部样式：

<head>
  <style>
    hr {
      color: red;
    }
    p {
      margin-left: 10px;
    }
    body {
      background-image: url("images/xxx.gif");
    }
  </style>
</head>

内联样式：

<p style="color: red;margin-top: 10px">这是一个段落</p>

背景（background）

属性	说明	值	版本
background
background-attachment
background-color
background-image
background-position
background-repeat

文本（text）

属性	说明	值	版本
color	颜色	red、#ff0000、rgb(255,0,0)、inherit	CSS1
direction	方向	ltr(默认)、rtl、inherit	CSS2
line-height	行高		CSS1
letter-spacing
text-align
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow
text-transform
unicode-bidi
white-space
word-spacing