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	设置元素的上外边距

CSS基本语法（慕课网学习笔记）的更多相关文章

CSS定位（慕课网学习笔记）
定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...
HTML基本语法（慕课网学习笔记）
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
js之DOM入门（慕课网学习笔记）
DOM简介获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
Float浮动（慕课网学习笔记）
float浮动属性:值意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...
【慕课网学习笔记】Java共享变量的可见性和原子性
1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...
js之window对象（慕课网学习笔记）
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础创建窗口.调整窗口.移动窗口.关闭窗口 ...
初识javaScript(慕课网学习笔记)
js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...

随机推荐

java02动手动脑
1 编写一个方法,生成一千个随机数,用ppt提供的纯随机数发生器. 做这个题目时,看到老师已经给出Xn+1=(aXn+c) mod Integer.MAX_VALUE;给出了公式自然就算法明了. 我想 ...
Python图表库Matplotlib 组成部分介绍
图表有很多个组成部分,例如标题.x/y轴名称.大刻度小刻度.线条.数据点.注释说明等等. 我们来看官方给的图,图中标出了各个部分的英文名称 Matplotlib提供了很多api,开发者可根据需求定制图 ...
龙芯 loongnix20 rc2 初体验
2021-07-24 v0.0.1 版权声明:原创文章,未经博主允许不得转载 3A5000 昨天发布啦,历史上的昨天是中共一大的第一天. 3A5000 的团购还没开始(大概还是3999左右整机的样子) ...
Ubuntu21.04 / Linux Mint20.2 安装 TradingView分析软件
TradingView 是我们经常使用的一个分析工具!在Linux 下安装桌面版,就可以爽快的用起来了,目前是Beta测试版,相信很快就会有正式版的 1.打开终端,执行下列命令,更新系统到最新 sud ...
<题解>[SDOI2017]硬币游戏
solutions 题面(loj) 题面(luogu) 这个题吧是我很久很久以前留下的坑了,到了今天才补好.(是不是太菜了) 暴力这个和之前的题解一样,确实可以用 trie 树,这复杂度是\(\ma ...
Verilog function的使用
function的用法 function的标准写法如下: function <返回值的类型或是范围> (函数名): <端口说明语句> //input xxx <变量类 ...
Spring Data Commons 远程命令执行漏洞（CVE-2018-1273）
影响版本 Spring Framework 5.0 to 5.0.4 Spring Framework 4.3 to 4.3.14 poc https://github.com/zhzyker/exp ...
大数据学习（06）——Ozone介绍
前面几篇文章把Hadoop常用的模块都学习了,剩下一个新模块Ozone,截止到今天最新版本是0.5.0Beta,还没出正式版.好在官方网站有文档,还是中文版的,但是中文版资料没有翻译完整,我试着把它都 ...
oracle（enquences & latches ）lock (oracle 锁大全)
资料来自官方文档: https://docs.oracle.com/database/121/CNCPT/consist.htm#CNCPT1333 https://docs.oracle.com/d ...
anyRTC Web SDK 实现音视频呼叫功能
前言大家好,今天小编带给大家一个基于 anyRTC Web SDK 实现音视频呼叫的功能(本项目采用vue开发). 前提条件在开始写代码之前还需要做一些准备工作,如果你之前没有使用过 anyRTC ...