CSS 指层叠样式表 (Cascading Style Sheets)
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
<link rel="stylesheet" type="text/css" href="test.css">
css的引入方式
外联样式引入:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
<style type="text/css">
.my-p {
background-color: #00ff00;
}
</style>
</head>
<body>
<p class="my-p" style="background-color: #aaa;">这是我的段落。</p>
</body>
</html>
内联样式引入:
<a style = css > </a>
内嵌样式引用:
<style type="text/css">
.my-p {background-color: #00ff00;}
</style>
link标签的个数 :
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test.css">
低版本的IE浏览器最多31个link标签。
以后的不起作用。
内嵌样式引用只会在标签上起作用不影响其他的,太多容易乱。
内联:<style type="text/css">
.my-p {
background-color: #00ff00;
}
</style>
Style标签中写=选择器(在某个dom上起作用)
<p class="my-p" style="background-color: #aaa;">这是我的段落。</p>
找到my-p进行修饰
.my-p:class属性的
#my-p:id属性的
<p id="my-p" style="background-color: #aaa;">这是我的段落。</p>
当前的页面相应元素都被渲染:
p {
background-color: #00ff00;
}
内嵌样式 > 内联样式 > 外联样式
css常用的方式:是外联样式:缓存优势 范围大 代码简洁
缓存是指浏览器临时文件交换区,很多文件从远程服务器下载,静态文件
Css语法:
选择器selector {property(属性名): value(属性值)}
For example:
h1 {color:red; (字体大小)font-size:(像素:px就是pixel的缩写,pixel即像素)14px;}
red==#ff0000
h1 {color:#ff0000; font-size:14px;}
选择器有3种最常见的
html标签
a{}
.alink{}=》<a class="alink"></a>
#link{}
精准度 :(精准度 id > class > tagname )id是一个独一无二的,给某一个dom元素加上css;class是多个的,有class属性的标签都会被渲染 ;a标签是全部的。