定海建设规划网站今日最新头条新闻条
目录
一.什么是CSS
编辑二.语法规则:
三.使用方式
1.行内样式:
2.内部样式:
3.外部样式:
空格规范 :
四.CSS选择器类型
1.标签选择器
2.类选择器
3.ID选择器
4.通配符选择器
5.复合选择器
五.常用的CSS样式
1.color:设置字体颜色
2.font-size:设置字体大小
3.border:边框
4.width:设置宽度,height:设置高度
改变显⽰模式
5.padding:设置内边距
6.margin:设置外边距
一.什么是CSS
CSS：Cascading Style Sheet 层叠样式表,⽤于控制⻚⾯的样式.
CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离。
CSS前->CSS 后:
二.语法规则:
选择器{声明内容}
选择器:决定针对哪块修改(找谁)
声明内容:决定修改成什么(干什么)
声明的属性是 键值对,用分号 " ; " 来分隔键值对，用冒号" : "来区分键和值.
注意:
CSS要写在style标签中;
style标签可以放到⻚⾯任意位置.⼀般放到head标签内.
CSS使⽤ /**/作为注释.(使⽤ctrl+/快速切换)
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>h1{color:red;width:500px;}</style>
</head>
<body><h1>好好学习</h1>
</body>三.使用方式
CSS有三种使用方式:
1.行内样式:
在标签内 使⽤style属性，属性值是css属性键 值对
<!-- 行内样式 --><div style="color:red">好好学习</div>特点:行内样式会引入大量的代码,使代码看起来很乱,因此不常用
2.内部样式:
定义style标签,在标签内部定义CSS样式.
<style>h1{...}</style>
特点:适用于简单的样式实现, 只针对某个标签⽣效.缺点是不能写太复杂的样式.
3.外部样式:
定义标签<link>，通过 href属性引⼊外部css ⽂件
特点:html和CSS实现完全分离,常用于企业开发中.
样式不区分大小写,常用于小写.
空格规范 :
冒号后⾯带空格
选择器和 { 之间也有⼀个空格.
四.CSS选择器类型
1.标签选择器
根据标签对所选内容进行样式设置。
2.类选择器
通过在标签中添加属性class=" 类名",通过.类名 进行选择设置属性.
类选择器可以同名,是用来对一类标签进行样式设置的;类名不能是单独的数字,不能是标签名等特殊字符.
3.ID选择器
通过在标签中添加属性 id=" ID名",通过 #ID名 进行选择设置属性.
id 是唯⼀的,不能被多个标签使⽤，ID名不允许同名,不能是标签名等特殊字符.
4.通配符选择器
使用 * 用来设置页面的所有内容.
5.复合选择器
通过空格分隔进行多重选择,选择到要设置的内容
1. 以上三个标签选择器ul li h1 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选 择器的组合,也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签,也可以是"孙⼦"标签
3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.
五.常用的CSS样式
1.color:设置字体颜色
颜色表达方式:
1>.直接写颜色英文单词:
2>.rgb代码的颜色: 
rgb代表红绿蓝三原色,通过比例的设置选择颜色.
3>.16进制表示:
16进制表示的原理还是rgb,每两个16进制代表一个rgb颜色.
2.font-size:设置字体大小
3.border:边框
border是一个符合属性,可同时设置多个属性,边框宽度,边框颜色,边框形状,不分先后顺序,浏览器可以自己识别.
也可以拆开来设置:
| 样式 | 作用 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-color | 设置边框颜色 | 同color |
| border-style | 设置边框形状 | dotted:点状 solid:实线 double:双线 dashed:虚线 |
上面的代码,等同于下面的代码:
4.width:设置宽度,height:设置高度
注意:只有块级元素才能设置宽度和高度.
块级元素是HTML标签的⼀种显⽰模式,对应的还有⾏内元素
常⻅块级元素:h1-h6,p,div等
常⻅⾏内元素:a span
改变显⽰模式
使⽤display属性可以修改元素的显⽰模式.
display: block 改成块级元素
display: inline 改成⾏内元素
5.padding:设置内边距
padding用来设置内容和边距的距离，内容默认是顶着边框来放置的.⽤padding来控制这个距离
padding也是一个复合样式,可以对四个边分别设置:
padding-top:上边距
padding-left:左边距
padding-right:右边距
padding-bottom:下边距
6.margin:设置外边距
margin:设置元素和元素之间的距离.
margin也是⼀个复合样式,可以给四个⽅向都加上外边距
margin-top
margin-bottom
margin-left
margin-right
上面的内边距和外边距都是相对的,要根据所设置的对象来确认内外边距.