快速入门CSS
欢迎关注个人主页：逸狼
创造不易，可以点点赞吗
如有错误，欢迎指出~
目录
CSS
css的三种引入方式
css书写规范
选择器分类
标签选择器
class选择器
id选择器
复合选择器
通配符选择器
color颜色设置
border边框设置
width/heigth
内/外边距
CSS
CSS(Cascading Style Sheet),层叠样式表,⽤于控制⻚⾯的样式.CSS能够对⽹⻚中元素(页面上所有内容,称之为元素)位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离.
选择器+{⼀条/N条声明}
选择器决定针对谁修改(找谁)
声明决定修改啥.(⼲啥)
声明的属性是键值对.
使⽤;区分键值对,使⽤:区分键和值.
<style>
/* 选中所有的p标签 */
p{
/* 设置字体颜色 */
color:red;
/* 设置字体大小 */
font-size:30px;
}
</style>
<p>hello</p>
<p>hello1</p>
<p>hello2</p>
你好这里是选中了所有的p标签中的内容对其做了样式修改
- CSS要写到style标签中(后⾯还会介绍其他写法)
- style标签可以放到⻚⾯任意位置.⼀般放到head标签内.(因为HTML文件是从上往下加载,先加载CSS,方便用户使用)
- CSS使⽤/**/作为注释.(使⽤ctrl+/快速切换)
css的三种引入方式
css符合"就近原则"(元素离最近的css先生效)
- 内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤.
- ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.
- 外部样式，html和css实现了完全的分离,企业开发常⽤⽅式.
css书写规范
- css 不区分大小写,但是开发时统一使用小写字母
- 冒号后⾯带空格
- 选择器和{之间也有⼀个空格
选择器分类
CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.
'注意:class可以被多个元素使用,id只能被一个元素使用(class可以重复,id不能重复)
-
标签选择器
标签名{} 根据标签选择元素
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
-
class选择器
.类名{} 根据类选择元素
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<p class="red">hello</p>
<p class="green">hello2</p>
<p class="blue">hello3</p>
<span class="red">我是一个span</span>
<div class="green">我是一个div</div>-
id选择器
#id{} 根据id选中元素
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}
-
复合选择器
标签名.类{} 多个单选择器的组合
- 空格 表示后代
- 没空格 表示交集
- 逗号 表示并集
- > 表示相邻后代
/* 1.空格表示后代(儿子或孙子都行) 这里表示要满足ul里中找到li,将li设置为红色 */
ul li{
color:red;
}
/* 2.没空格 表示交集 这里表示p标签和red类都要满足的设置为 红色*/
p.red {
color: red;
}
/* 3.逗号表示并集 这里表示red类和green类字体都设为 40px */
.red, .green{
font-size: 40px;
}
/*4. >表示相邻后代"只能是父子辈(相隔一代)"不能是爷孙辈 */
ul>li>a{ /*这里表示ul里的li,li中的a标签生效*/
color: brown;
}-
通配符选择器
通配符{}
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}
color颜色设置
颜⾊有如下⼏种表达⽅式:
- 英⽂单词,如red,blue
- rgb代码的颜⾊,如rgb(255,0,0)
- ⼗六进制的颜⾊如#ff00ff(相同的两个值可以简写为一个,这里可以简写为#f0f)
border边框设置
边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断
.text1{
border: 1px solid purple;
}
这里表示选择text1标签设置宽度为1像素,样式为实线的紫色边框
border-width宽度设置,取值顺序
- 一个值=> 上下左右取值相同
- 两个值 =>上下 左右
- 三个值=>上 左右 下
- 四个值=> 上 右 下 左(顺时针)
width/heigth
width设置宽度,heigth设置高度
只有块级元素可以设置宽高,块级元素独占一行,行内元素不独占一行
常见块级元素:h1-h6,p,div等
常见行内元素:a span
可以将行内元素改成块级元素
使⽤display属性可以修改元素的显⽰模式.
- display: block 改成块级元素[常⽤]
- display: inline 改成⾏内元素[很少⽤]
/* 将span改为 块级元素 */
span{
display: block;
}内/外边距
内边距和外边距是相对的概念
确定一个边框为参考边框
- 边框与内容之间的距离是内边距padding
- 边框与边框之间的距离是外边距margin
当两个元素(相邻)设置边距的值不一致时,取较大的值
<style>
div {
border: 1px solid red;
padding: 20px;
margin: 40px;
}
</style>
/* 以整个页面的边框为参考边框 ,内边距为100px*/
html{
padding:100px
}