CSS基础知识

时间：2024-10-05 10:10:57

css用于控制html文档样式。Css链接方式：链接外部文件，导入外部样式文件，使用行内样式，使用内部样式定义（通常不建议使用：无法做到css样式被其他html文档使用；会导致html文件过大，大量重复下载，导致网络负载过重；如果需要改变整个网站的风格时，需要大量修改，不利于工程化管理）。

css选择器的基本种类，包括id选择器、类选择器、元素选择器。这里主要讲解id选择器、类选择器、包含选择器。

css选择器基础知识https://www.w3cschool.cn/css/css-selector.html

Class选择器:.+class名称。Id选择器:#+id名称。

Css链接方式

     1.链接外部文件

新建a.css文件，通过链接外部文件形式，加载css样式

（1）Html

<!DOCTYPE html>
<html>
  <head>
    
    <meta charset="UTF-8">
    <title>链接外部css样式</title>
    <link href="a.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
</table>
</body>
</html>

（2）Css

table{

background-color:#003366;

width:400px;}

td{

background-color:#fff;

font-family:"楷体_GB2312";

font_size:20px;

text-shadow:-8px 6px 2px #333;}
    
     2.内部样式

通过style标签，嵌入css样式，直接引入内部css样式

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8">
    <title>内部css样式</title>
	<style>
table{
background-color:#003366;
width:400px;}
td{
background-color:#fff;
font-family:"楷体_GB2312";
font_size:20px;
text-shadow:-8px 6px 2px #333;}
.title{
font-size:18px;
color:#60c;
height:30px;
width:200px;
border-top:3px solid #cccccc;
border-left:3px solid #000000;
border-bottom:3px solid #cccccc;
border-right:3px solid #000000;}
</style>
</head>
<body>
<div class="title">java体系图书</div>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>疯狂Java讲义</td>
</tr>
</table>
</body>
</html>

 

     3.内联样式

通过div标签中的style属性，设置css样式

<!DOCTYPE html>
<html>
  <head>    
    <meta charset="UTF-8">
    <title>内联css样式</title>
    <link href="a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="font-size:18px;color:#60c;height:30px;width:200px;border-top:3px solid #cccccc;border-bottom:3px solid #cccccc;
border-left:3px solid #000000;border-right:3px solid #000000;">
疯狂Java体系图书:</div>
<table style="background-color:#0099bb">
<tr>
<td style="background-color:#ffffff;font-falimy:楷体_GB2312;font-size:20px;text-shadow:-8px 6px 3px #333">疯狂Java</td></tr>
<tr>
<td style="background-color:#ffffff;font-family:楷体_GB2312;font-size:20px;text-shadow:-8px 6px 3px #333">疯狂Java</td></tr>
</table>
</body>
</html>

 

Css选择器

        1. class选择器
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
.my{
width:240px;
height:40px;
background-color:#dddddd;}
div.my{
border:2px dotted black;
background:#ffffff;}</style>
</head>
<body>
<div class="my">中国北京</div>
<p class="my">http://www.baidu.com</p>
</body>
</html>

 

        2.id选择器
<!DOCTYPE html>
<html>
  <head>
    
    <meta charset="UTF-8">
    <title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
div{
width:240px;
height:40px;
background-color:#dddddd;
padding:3px;}
#my{
width:240px;
border:2px dotted black;
background:#888;}</style>
</head>
<body>
<div>中国北京</div>
<div id="my">http://www.baidu.com</div>
</body>
</html>
        3. 包含选择器
<!DOCTYPE html>
<html>
  <head>
    
    <meta charset="UTF-8">
    <title>内联css样式</title>
<link href="a.css" rel="stylesheet" type="text/css">
<style>
div{
width:350px;
height:60px;
background-color:#ddd;
margin:3px;}
div .a{
width:200px;
height:35px;
border:2px dotted black;
background:#888;}</style>
</head>
<body>
<div>中国北京</div>
<div><div class="a">http://www.baidu.com</div></div>
</body>
</html>

 

相关文章