CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

高开低走。

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量80

点赞数

分类专栏：锦到说CSS

本文链接：https://blog.csdn.net/qq_43568982/article/details/115521111

版权

锦到说CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始时间：2021-04-08

CSS

Cascading Style Sheet 层叠样式表语言
作用：修饰HTML页面，让HTML页面更好看

好比HTML的化妆品

在HTML页面中嵌套使用CSS的三种方式

第一种方式

在标签内部使用style属性来设置元素的css样式，这种方式称为内联定义方式。
随用随写
语法格式:
<标签style=“样式名:样式值;样式名:样式值;样式名:样式值;…”/标签>

需要的时候随用随查文档，了解div下面各个参数的设置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>演示CSS的第一种方式</title>
</head>

<body>
<!--默认为block，如果选为None，那么就不显示出来-->
<div style="width: 300px;height: 300px;background-color: #FF6543;
display: block;border-width: 10px;border-style: dashed;border-color: blue"></div>
</body>
</html>

第二种方式

在head标签中使用style块，这种方式被称为样式块方式。
统一分配好规则，再写，这些选择器可以是超链接a
可以是div等等
语法格式:

<head>
<style type="text/css">
选择器{
样式名:样式值;样式名:样式值;.....
}
选择器{
样式名:样式值;样式名:样式值;
}
</style>
</head>

一般分为

id选择器 id
层级选择器 div
自定义选择器 class

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS第二种方式</title>
<style type="text/css">
/*
		CSS的注释样式和Java一样
		#加上id的名字就是id选择器
		*/
#usernameErrorMessage {
    font-style: oblique;
    color: red;
    font-size: 22px;
}
</style>
</head>

<body>
<span id="usernameErrorMessage">对不起，用户名不能为空,please input the right name</span>
</body>
</html>

除了使用id，还可以自定义类，所有定了同一个类的可以使用相同的样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS第二种方式</title>
<style type="text/css">
/*
		CSS的注释样式和Java一样
		#加上id的名字就是id选择器
		*/
#usernameErrorMessage {
    font-style: oblique;
    color: red;
    font-size: 22px;
}
/*
	直接写div的会比用id的应用范围更广
	*/
div {
    background-color: green;
    border: 1px solid grey;
    width: 100px;
    height: 100px;
}
/*标签之间没有共同特征，就定义为同一个类进行维护
	类选择器 语法格式 .类名{
	
	}
	*/

.myclass {
    font-size: 20px;
    width: 400px;
    height: 100px;
}
</style>
</head>

<body>
<span id="usernameErrorMessage">对不起，用户名不能为空,please input the right name</span>
<div>这是div1</div>
<div>这是div2</div>
<input type="text" class="myclass"/>
<br>
<br>
<select class="myclass">
  <option>本科</option>
  <option>硕士</option>
</select>
</body>
</html>

在这里插入图片描述
也可以定为父标签下所有的子标签
例如

 <table id="mytable" border="1px" width="50%">
        <tr>
            <th>员工编号</th>
            <th>员工名字</th>
            <th>员工薪资</th>        
        </tr>

这样只需修改h2的值

    <table id="mytable" border="1px" width="50%">
        <tr>
            <th><h1>员工编号</h1></th>
            <th><h2>员工名字</h2></th>
            <th><h2>员工薪资</h2></th>        
        </tr>   
    </table>

在这里插入图片描述

第三种方式

链入外部CSS样式表文件，将样式单独写到文件里面
最常用也最好维护
比如把页面统一改为灰色，直接改配置文件就行

<link type="text/css" rel="stylesheet" href="css文件的路径"/>

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>引入CSS的第三种方式</title>
	<!--引入CSS-->
	<link type="text/css" rel="stylesheet" href="Test_CSS.css"/>
</head>

<body>
	<a href="http://www.4399.com/" target="_blank">4399小游戏</a>
	<span id="baidu">百度</span>
</body>
</html>

对应CSS文件
通过id以及a链实现样式的定义

@charset "utf-8";
/* CSS Document */
a{
	font-size: 20px;
	font-style: italic;
}
#baidu{
	text-decoration: underline;
}

列表样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul {
    /*list-style-type: none;*/
	list-style:inside;
}
	#div1{
		
		background-color: aqua;
		width: 300px;
		height: 300px;
		padding-bottom: 10px;
		border-style: dashed;
		border-bottom-width: 10px;
		border-bottom-color: red;
		
	}
</style>
</head>

<body>
	<div id="div1">演示演示演示一下绝对定位</div>
	<br>
<ul>
  <li>中国</li>
  <ul>
    <li>哈尔滨</li>
    <li>上海</li>
  </ul>
  <li>美国</li>
</ul>
</body>
</html>