CSS基本语法（慕课网学习笔记）

CSS的声明，内外联样式以及CSS的优先级#

css学习.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS学习</title>
	<!-- 这是其中一种外联样式 -->
	<style type="text/css">
	/*CSS声明、CSS声明块、CSS选择器*/
		/*body为CSS选择器 ，此处为元素选择*/
		body{
			/*{}中所有的内容为一个声明块*/
			/*CSS声明（属性名称:值;）*/
			background-color:#56ADDC; 
		}
	</style>
	<!-- 这是最常用的一种外联样式的使用 -->
	<link rel="stylesheet" href="CSS学习.css">
</head>
<body>
	<!-- 直接加入style内联样式 -->
	<p style="background-color: #C82424;font-size: 25px;">这是一个段落内容发</p>
	<p>这是外联样式的测试</p>
</body>
</html>

css学习.css

p{
	background-color: #C82424;
	font-size: 25px;
}

CSS选择器#

选择器的优先级，内联选择器 > 外联选择器（ id选择器 > class选择器 > 元素选择器）
!important可以改变优先级，不建议使用，不解释

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style>
		/*id选择器*/
		#myid {
			color:#FD0000;
		}
		/*class选择器*/
		.myclass {
			color:#000FFA;
		}
		/*元素选择器*/
		span{
			color:#FFB900;
		}
		/*属性选择器*/
		[title] {
			color:#00F7AA;
		}
		/*后代选择器，父代选择器之下的所有后代选择器  选择器之间加空格*/
		#id1 span{
			color: #FF0000;
		}
		/*子元素选择器,只作用于儿子*/
		#id2 > span{
			color: #A70000;
		}
		/*兄弟元素选择器，只作用于其兄弟且只作用于一个相邻兄弟 */
		#myspan + span{
			color: #FF0000;
		}
		/*伪类选择器，改变a元素点击过程中的各种变化*/
		/*改变未访问是的内容*/
		a:link{
			color: #00C9FF;
    		text-decoration: none;
		}
		/*鼠标划入时的变化*/
		a:hover{
			color: #FF0000;
		}
		/*点击后的变化*/
		a:active{
			color: #58FF00;
		}
		/*点击后的效果*/
		a:visited{
			color: #E8FF00;
		}
		/*伪元素*/
		/*::before会在当前元素创建一个子元素（第一个位置）作为伪元素*/
		/*::after会在当前元素创建一个子元素（最后一个一个位置）作为伪元素*/
		/*content显示的内容*/
		q::before{
			content: "<<";  
			color:#00FFC4;
		}
		q::after{
			content: ">>";
			color:#00FFDE; 
		}
	</style>
</head>
<body>
	<p id="myid">这是一段文本内容</p>
	<p class="myclass">这是一段文本内容</p>
	<span>这是一段文本内容</span>
	<p title="this is p.">这是一段文本内容</p>
	<div id="id1">
		<span>span1.
			<span>span2.</span>
		</span>
	</div>
	<div id="id2">
		<span>span1.
			<span>span2.</span>
		</span>
	</div>
	<span id="myspan">span1.</span>
	<span>span2.</span>
	<span>span3.</span>
	<br>
	<a href="http://www.imooc.com">伪类选择器，改变a便签的前后状态</a>
	<br>
	<q>一些引用</q>,他说,<q>比没有好。</q>
</body>
</html>

CSS设置样式#

背景样式设置#

属性描述
background简写属性，作用是将背景属性设置在一个声明中
background-color设置元素的背景颜色
background-image把图像设置为背景
background-position设置背景图像的起始位置
background-repeat设置背景图像是否及如何重复
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS样式设置</title>
	<style>
		#p1{
			/*设置背景颜色*/
			background-color: #FF0000;
		}
		#p2{
			/*设置背景图片*/
			background-image: url("图标.jpg");
			width: 200px;
			height: 200px;
		}
		#p3{
			background-image: url("图标.jpg");
			width: 40px;
			height: 40px;
		}
		#p4{
			background-image: url("图标.jpg");
			width: 35px;
			height: 35px;
			/*背景图片的起始位置，下面代表左移40px,上移40px*/
			background-position: -40px -40px;
		}
		body{
			/*默认为水平重复垂直重复铺满网页*/
			background-image: url("https://www.imooc.com/static/img/index/logo.png");

			/*默认设置，即全部铺满的意思*/
			/*background-repeat: repeat;*/

			/*横向铺满*/
			/*background-repeat: repeat-x;*/
			/*纵向铺满*/
			/*background-repeat: repeat-y;*/

			/*不进行复制铺满，有多大显示多大*/
			background-repeat: no-repeat;
		}
	</style>
</head>
<body>
	<p id="p1">这是第一个段落内容</p>
	<p id="p2"></p>
	<p id="p3"></p>
	<p id="p4"></p>
</body>
</html>

文本样式设置#

属性描述
color设置文本颜色
text-align对其元素中的文本
text-decoration向文本添加修饰
text-indent缩进文本的首行
vertical-align设置元素的垂直对其
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS样式设置-文本</title>
	<style>
		#p1{
			color: #FF0000;
		}
		#p2{
			text-align: left;
		}
		#p3{
			text-align: center;
		}
		#p4{
			text-align: right;
		}
		/*用不太着*/
		/*#p5{
			vertical-align: top;
			width: 50px;
		}
		#p6{
			vertical-align: middle;
			width: 50px;
		}
		#p7{
			vertical-align: bottom;
			width: 50px;
		}*/
		a{
			/*向文本添加修饰*/
			text-decoration: none;
		}
		#p5{
			/*首行缩进*/
			text-indent: 50px;
		}
	</style>
</head>
<body>
	<p id="p1">这是第一个段落内容</p>
	<p id="p2">这是第一个段落内容</p>
	<p id="p3">这是第一个段落内容</p>
	<p id="p4">这是第一个段落内容</p>
	<!-- <p id="p5">这是第一个段落内容</p>
	<p id="p6">这是第一个段落内容</p>
	<p id="p7">这是第一个段落内容</p> -->
	<a href="#">这是一个链接</a>
	<p id="p5">这是第一个段落内容</p>
</body>
</html>

字体样式设置#

属性描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-weight指定字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        /* 设置字体系列，本机所支持的字体系列 */
        #p1 {
            font-family: "Times New Roman";
        }
        /* 设置自定义字体系列需要时再仔细研究 */
        @font-face {
            /*自定义字体系列的名字*/
            font-family: 'FontAwesome';
            src: url('font/fontawesome-webfont.eot?v=3.2.1');
            /*format表示当前引入的字体文件的格式*/
            src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        #p2 {
            font-family: FontAwesome;
        }
        #p3 {
            font-size: larger;
            /*italic斜体*/
            font-style: italic;
            /*加粗效果*/
            font-weight: bolder;
        }
    </style>
</head>
<body>
<p id="p1">this is text.</p>
<p id="p2">this is text too.</p>
<p id="p3">这是一个段落内容.</p>
</body>
</html>

设置列表样式#

属性描述
list-style用于把所有用于列表的属性设置于一个声明中
list-style-image把图像设置为列表项标志
list-style-type设置列表项标志的类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        /*改变无序列表前面的圆点*/
        /* 设置列表项的预定义样式 */
        #u1 {
            /*decimal改变圆点为1.2.3*/
            list-style-type: decimal;
        }
        /* 设置列表项的图片样式 */
        #u2 {
            /*改变圆点为图片*/
            list-style-image: url("imgs/mac.png");
        }
        /* 设置列表项水平方向排列 */
        #u3 {
            list-style-type: none;
        }
        #u3>li {
            float: left;
            display: inline-block;
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
<ul id="u1">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
<ul id="u2">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
<ul id="u3">
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>
</body>
</html>

表格样式设置#

属性描述
border设置表格边距
border-collapse设置表格的边框是否被折叠成一个单一的边框或隔开
width设置表格的宽度
text-align表格中的文本对齐
padding设置表格中的填充
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table, th, td {
            /*设置边框  边框宽度 边框颜色 边框样式*/
            border: 1px solid lightslategray;
            /*把双边框改变为单边框*/
            border-collapse: collapse;
        }
        table {
            width: 80%;
            /*外边距0表示上下外边距，auto表示左右自动外边距*/
            margin: 0px auto;
        }
        table th {
            /*背景颜色*/
            background-color: lightcoral;
            /*字体颜色*/
            color: white;
        }
        table th, table td {
            /*内边距*/
            padding: 10px;
        }
        .info {
            background-color: lightgreen;
            color: white;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>名称</th>
        <th>职位</th>
        <th>收入</th>
    </tr>
    <tr class="info">
        <td>张无忌</td>
        <td>老板</td>
        <td>100000</td>
    </tr>
    <tr>
        <td>小昭</td>
        <td>秘书</td>
        <td>10000</td>
    </tr>
    <tr class="info">
        <td>周芷若</td>
        <td>主管</td>
        <td>20000</td>
    </tr>
</table>
</body>
</html>

CSS布局#

一般有两行三列布局，三行两列布局

两行三列布局#

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两行三列布局</title>
	<style>
		html,body{
			/*去掉默认存在的外边距*/
			margin: 0px;
		}
		header{
			background-color: #7FEBD8;
			height: 150px;
		}
		#container{
			background-color: #6C4B4B;
			height:450px;
		}
		/*左右浮动有点认知不是很清楚，看后面博客*/
		nav{
			background-color: #FF0000;
			width: 20%;
			height: 100%;
			float: left;
		}
		aside{
			background-color: #0058FF;
			width: 20%;
			height: 100%;
			float: right;
		}
		article{
			background-color: #FFCE00;
			height: 100%;
		}
	</style>
</head>
<body>
	<header></header>
	<div id="container">
		<nav></nav>
		<aside></aside>
		<article></article>
	</div>
</body>
</html>

三行两列布局#

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三行两列布局</title>
	<style>
		html,body{
			margin: 0px;
		}
		header{
			background-color: #AD6363;
			height: 150px;
		}
		footer{
			background-color: #A71414;
			height: 150px;
		}
		#container{
			background-color: #4E367D;
			height: 500px;
		}
		nav{
			background-color: #186F1A;
			width: 150px;
			height: 100%;
			float: left;
		}
		article{
			background-color: #FFED00;
			height: 100%;
			/*margin-left: 150px;*/
		}
	</style>
</head>
<body>
	<header></header>
	<div id="container">
		<nav></nav>
		<article></article>
	</div>
	<footer></footer>
</body>
</html>

CSS盒子模型（边框border,内边距padding,外边距margin）#

边框border
border统一设置的顺序为 宽度、颜色、类型。例

border:10px #A71414 solid;
属性描述
border简写属性，用于把针对四个边的属性设置在一个声明
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width用于设置元素所在边框的宽度，或者单独地为各边边框设置宽度
border-color设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色

内边距padding
内边距统一设置顺序 上右下左

属性描述
padding使用缩写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

外边距margin
外边距统一设置顺序 上右下左

属性描述
margin简写属性。在一个声明中设置所有的外边距属性
margin-bottom设置元素的下外边距
margin-left设置元素的左外边距
margin-right设置元素的右外边距
margin-top设置元素的上外边距
posted @   莫逸风  阅读(77)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
CONTENTS
✕