今日总结
2020年9月9日:
css介绍:
CSS定义如何显示HTML元素。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)
例如:
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
css结构
例:
td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成:
属性font-size,color和值10.5pt,#666666
常见的选择符
1元素选择符
当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开 例:td,p,li,input,select{font-size:12px;}
2class(类)选择符
例:
〈head>
<title>.....</title>
<style type="text/css">
.red{font-size:10.5pt;color:#ff0000}
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">......</p>
<p> .....</p>
</body>
例:
〈head>
<title>.....</title>
<style type="text/css">
h1.red{color:#ff0000}
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">.......</p>
<h1 class="red">.......</h1>
</body>
3 id选择符
与class选择附类似,只是把'.'换成'#'
例:<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center" id="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用