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 ...
随机推荐
- java课堂动手动脑及课后实验总结
动手动脑一:枚举 输出结果: false false true SMALL MEDIUM LARGE 分析和总结用法 枚举类型的使用是借助ENUM这样一个类,这个类是JAVA枚举类型的公共基本 ...
- SpringBoot 构造器注入、Setter方法注入和Field注入对比
0. 引入 今天在看项目代码的时候发现在依赖注入的时候使用了构造器注入,之前使用过 Field 注入和 Setter 方法注入,对构造器注入不是很了解.经过查阅资料看到,Spring 推荐使用构造器注 ...
- P2490 [SDOI2011]黑白棋
P2490 [SDOI2011]黑白棋 题意 一个 \(1*n\) 的棋盘上,A 可以移动白色棋子,B 可以移动黑色的棋子,其中白色不能往左,黑色不能往右.他们每次操作可以移动 1 到 \(d\) 个 ...
- win10家庭版无法访问samba
1:本教程只针对win10家庭版用户,右键点击电脑选择属性就能看到自己的版本.(因为win10家庭版没有本地策略组) 2:针对一下连接不上的情况 3:连接不上的情况 ① : ...
- 构建后端第2篇之---springb @ComponentScan注解使用
张艳涛写于2021-2-8日 构建后端项目的时候遇到一个问题,在zyt-auth项目的依赖定义了@Component类,这个类在项目启动的时候提示没有找到bean Field tokenService ...
- ES6 属性方法简写一例：vue methods 属性定义方法
const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { retur ...
- Python 机器学习实战 —— 无监督学习（下）
前言 在上篇< Python 机器学习实战 -- 无监督学习(上)>介绍了数据集变换中最常见的 PCA 主成分分析.NMF 非负矩阵分解等无监督模型,举例说明使用使用非监督模型对多维度特征 ...
- 3D性能优化 | 说一说glTF文件压缩
引言 最近做T级互动,需要使用到3D模型.相信大家和我一样,在开始着手的时候,一定会有这么些问题: 1.如何选择3D模型的导出格式 2.如何对模型文件进行优化 3.在大流量的项目中兼容性怎么样 让我们 ...
- git常用命令究极记忆大法
第一点,我觉得也是最最重要的,就是明确git的三个区,工作区(working),暂存区(index),仓库(repository). 第二就是区与区之间的操作了. working与index之间: g ...
- Shellshock 破壳漏洞 Writeup
破壳漏洞 CVE编号:CVE-2014-6271 题目URL:http://www.whalwl.site:8029/ 提示:flag在服务器根目录 ShellShock (CVE-2014-6271 ...