CSS入门

CSS,层叠样式表,是对web页面显示效果进行控制的一套标准。当页面的内容受多种样式控制,将会按照一定的顺序处理。
CSS的作用:(1)将网页的内容结构和格式控制分开。(2)可以精确控制页面的所有元素。(3)使页面显示效果更加丰富
语法结构:CSS语法由选择符、属性和值三部分组成

<style type="text/css">
body { background-color: #cccccc }
↓      ↓          ↓
选择符   属性        值
<style>

CSS引用,三种方式

1.行内引用
直接写入html标签中:<body style="background-color:#ccccc;">
2.页内引用
将style标签定义在<head></head>之间:<head><style type="text/css ">body{ background-color:#cccccc;}</style></head>
3.外部引用
将CSS样式代码单独放在一个外部文件中,再由页面进行调用:
外部样式代码:body { background-color:#cccccc; }
在index中引用:
<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

CSS优先级:1>2>3 (哪个样式近就用哪个)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS优先级</title>

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

<style type="text/css ">body{ background-color:#cccccc;}</style>

</head>
<body style="background-color:red;">

</body>
</html>

由以上结果可知:行内引用>页内引用>外部引用

CSS注释符:/* 注释内容 */

CSS选择符
(1)通配选择符: * { color:blue;margin:0;padding:0;}
* 号表示所有的对象

(2)元素选择符: body {} h1 {}
指以网页中已有的标签名作为名称的选择符

(3)群组选择符: h1,h2, h3, p {font-size:12px;font-family:arial;}
除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义

原文地址:https://www.cnblogs.com/zhongqiwei/p/5751876.html