快速入门CSS || 干货 自整语句大全
CSS（Cascading Style Sheets 是一种用来表现文件样式的语言）
- 注意：在CSS中每句语句需加“;”
<style type="text/css"></style>
table tr td,th{border:1px solid #111;}
font-size:20px; /*修改字体大小*/
olor:red; /*设置文字颜色*/
font-weight:bold; /*设置字体加粗*/
/*注释语句*/
<span style="color:blue">语句A</span> /*设置语句A字体颜色*/
<link href="base.css" rel="stylesheet" type="text/css" />外部式css样式
(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）
使用<link>标签将css样式文件链接到HTML文件内
rel="stylesheet" type="text/css" 是固定写法不可修改
<link>标签位置一般写在<head>标签之内。
----------------------------------------------------------------------------
css样式三种方法的优先级：内联式 > 嵌入式 > 外部式
总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
----------------------------------------------------------------------------
内嵌式是指 <span style=" ">
----------------------------------------------------------------------------
嵌入式是指 写span{}在style中
----------------------------------------------------------------------------
外部式是指 卸载CSS文件里
----------------------------------------------------------------------------
{
} 选择器
----------------------------------------------------------------------------
.stress{
} 类选择器
配合<span class="stress"> 使用
----------------------------------------------------------------------------
#setGreen{
} ID选择器
配合<span class="stress"> 使用
----------------------------------------------------------------------------
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
----------------------------------------------------------------------------
.food>li{border:1px solid red;}
子选择器
使class名为food下的子元素li加入红色实线边框。
//粗细为1px， 颜色为红色的实线
----------------------------------------------------------------------------
.first span{color:red;}
后代选择器
>作用于元素的第一代后代，空格作用于元素的所有后代
----------------------------------------------------------------------------
* {} 通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素
----------------------------------------------------------------------------
a:hover{color:red;} 伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式
该行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红
----------------------------------------------------------------------------
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
eg：h1,span{color:red;}
----------------------------------------------------------------------------
继承
如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本
但注意有一些css样式是不具有继承性的。如border:1px solid red;
----------------------------------------------------------------------------
权值
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
----------------------------------------------------------------------------
设置最高权值
p{color:red!important;}
//加个!important
----------------------------------------------------------------------------
文字排版--字体
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
----------------------------------------------------------------------------
文字排版--字号、颜色
body{font-size:12px;color:#666}
----------------------------------------------------------------------------
文字排版--粗体
body{font-weight:bold;}
----------------------------------------------------------------------------
文字排版--斜体
body{font-style:italic;}
----------------------------------------------------------------------------
文字排版--下划线
a{text-decoration:underline;}
----------------------------------------------------------------------------
文字排版--删除线
.oldPrice{text-decoration:line-through;}
一般运用于：原价 现价
----------------------------------------------------------------------------
段落排版--缩进
p{text-indent:2em;}
缩进两个中文字符长度的空白
注意：2em的意思就是文字的2倍大小。
----------------------------------------------------------------------------
段落排版--行间距
p{line-height:1.5em;}
----------------------------------------------------------------------------
段落排版--中文字间距、字母间距
p{letter-spacing:50px;}
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
设置英文单词之间的间距：
p{word-spacing:50px;}
----------------------------------------------------------------------------
段落排版--对齐
h1{text-align:center;}
居中
h1{text-align:left;}
居左
h1{text-align:right;}
居右
----------------------------------------------------------------------------
元素分类--块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素
<div>为一块，
<p>为一块，
..............
----------------------------------------------------------------------------
元素分类--内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）
块状元素也可以通过代码display:inline将元素设置为内联元素
元素的高度、宽度及顶部和底部边距不可设置；
----------------------------------------------------------------------------
元素分类--内联块状元素
就是同时具备内联元素、块状元素的特点
<img>、<input>标签就是这种内联块状标签。
display:inline-block就是将元素设置为内联块状元素
----------------------------------------------------------------------------
----------------------------------------------------------------------------
盒模式
块级元素都具备盒模型的特点
----------------------------------------------------------------------------
border-width:2px; 设置盒的边框宽度
----------------------------------------------------------------------------
border-style:solid; 设置边框样式为实线
dashed（虚线）| dotted（点线）| solid（实线）
----------------------------------------------------------------------------
border-color:red; 设置边框颜色
----------------------------------------------------------------------------
border-top:1px solid red; 上边框
border-bottom:1px solid #ccc; 下边框
border-left:1px solid red; 左边框
border-right:1px solid red; 右边框
----------------------------------------------------------------------------
width:200px;height:30px; 宽200，高30
----------------------------------------------------------------------------
盒模型--填充
元素内容与边框之间是可以设置距离的，称之为“填充”。
padding-top:20px;
padding-bottom:15px;
padding-left:30px;
padding-right:10px;
如果上、右、下、左的填充都为10px;可以这么写：div{padding:10px;}
----------------------------------------------------------------------------
盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置。
margin-top:20px;
margin-bottom:15px;
margin-left:30px;
margin-right:10px;
如果上右下左的边界都为10px;可以这么写：div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：div{ margin:10px 20px;}
----------------------------------------------------------------------------
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
----------------------------------------------------------------------------
----------------------------------------------------------------------------
CSS布局模型
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
----------------------------------------------------------------------------
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
float:left;
} 左对齐
float:right;右对齐
#div1{float:left;}
#div2{float:right;}
一左一右
----------------------------------------------------------------------------
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
----------------------------------------------------------------------------
层模型--绝对定位
div{
position:absolute;
right:100px;
top:50px;
} 注明绝对定位，距离右边100像素，距离上面50像素
----------------------------------------------------------------------------
层模型--相对定位
#div1{
position:relative;
left:100px;
top:50px;
} 注明相对定位，新位置距离原位置向右边偏移100像素，向下偏移50像素
----------------------------------------------------------------------------
层模型--固定定位
拖动滚动条时位置固定不变
#div1{
position:fixed;
left:100px;
top:50px;
} 注明固定定位，距离左边100像素，距离上面50像素
----------------------------------------------------------------------------
Relative与Absolute组合使用
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:100px;
left:30px;
}
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
此时box2所在的div在box1所在的div里，所以box2是相对于box1来定位，而不是相对于浏览器来定位了
注意：box1中的position:relative;和box2中的position:absolute;一定要写
----------------------------------------------------------------------------
盒模型代码简写
设置四个方向的边距是按照顺时针方向设置的：上右下左。
margin:10px 10px 10px 10px;
top、right、bottom、left的值相同
可简写成 margin:10px;
margin:10px 20px 10px 20px;
top和bottom值相同、left和 right的值相同
可简写成 margin:10px 20px;
margin:10px 20px 30px 20px;
left和right的值相同
可简写成 margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
----------------------------------------------------------------------------
颜色值缩写
当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
eg：
p{color:#000000;} → p{color: #000;}
p{color:#336699;} → p{color: #369;}
----------------------------------------------------------------------------
字体缩写
eg：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}可简写成：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
----------------------------------------------------------------------------
颜色值
1、英文命令颜色
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
----------------------------------------------------------------------------
长度值
1、像素 px
CSS规范中假设“90像素=1英寸”
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
----------------------------------------------------------------------------
----------------------------------------------------------------------------
水平居中设置-行内元素
.txtCenter{
text-align:center;
}
----------------------------------------------------------------------------
水平居中设置-定宽块状元素
div{
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
----------------------------------------------------------------------------
水平居中总结-不定宽块状元素方法（一）
加入 table 标签
----------------------------------------------------------------------------
水平居中总结-不定宽块状元素方法（二）
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
----------------------------------------------------------------------------
水平居中总结-不定宽块状元素方法（三）
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
----------------------------------------------------------------------------
隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
.container a{
position:absolute;
width:200px;
background:#ccc;
}
----------------------------------------------------------------------------
快速入门CSS || 干货 自整语句大全相关推荐
- 0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
- 0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
- Mysql最全笔记，快速入门，干货满满，爆肝
目录 一. MySQL的重要性 二.MySQL介绍 三.软件的服务架构 四. MySQL的安装 五. SQL语句 六. 数据库相关(DDL) 七. 表相关 八. DML相关(表中数据) 九. DQL( ...
- 0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
文章目录 1. CSS字体样式属性调试工具 2. font字体 2.1 font-size:大小 2.2 font-family:字体 2.2.1 CSS Unicode字体 2.3 font-wei ...
- 0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
- JavaScript快速入门（三）——JavaScript语句
JavaScript基本语句 基本概述 JavaScript是脚本语言,从上到下解释执行,最小单位为语句或语句块,每个语句以分号结尾,每个语句块以右大括号结尾. JavaScript可以将多条语句或语 ...
- Java快速入门到精通— Java break语句详解
所有流行的编程语言中都有循环语句.JAVA 中采用的循环语句与C语言中的循环语句相似,主要有 while.do-while 和 for! 那么在某些时候需要在某种条件出现时强行终止循环,而不是等到循环 ...
- CSS快速入门 CSS选择器字体排版
一.CSS的概述 CSS的使用方式:4种 1.行内式样式css设置 在标签中有一个属性可以设置css样式 ...
- CSS超基础，快速入门
title: CSS date: 2022-11-20 12:12:57 categories: 前端 tags: CSS 个人博客www.huangrd.top, CSS 1.CSS介绍 1.1什么 ...
最新文章
- 曾被ICLR拒稿，字节跳动今斩获最佳论文，ACL 2021各大奖项揭晓
- CentOS 7 的初始化
- Vertica 高可用性测试
- 第十九章 19 利用私有继承来实现代码重用
- 一种 Web 应用程序级别的 Cluster 实现技术
- Codeforces 861 B Which floor? 思维
- 使用Arquillian（包括JPA，EJB，Bean验证和CDI）测试Java EE 6
- 王道 —— 进程同步、进程互斥
- EasyInvoice 简介
- 花三分钟给女票写一个爬虫，做一回模范男友！
- 04 ZooKeeperAPI实战
- App_Offline.htm 功能,app_offline.htm 是怎样产生的？
- VUE全局this指向
- MTK6577 Android源代码目录
- 成为一名合格的软件测试工程师，需要具备哪些技能？
- 股票API下单接口是怎样传入交易数据的？
- 基于live555中的liveMedia库的client开发流程 此博文包含图片
- 博客能赚钱吗？如何赚钱
- 预装win11的surface pro8无损降级win10系统
- lib和dill区别