初识CSS
前端的组成:
结构语言:HTML (盖房子、毛坯房) 涉及到布局设计
表现语言:CSS (装修)
行为语言:JavaScript (安装点电梯… 基于事件的)
1. 了解CSS
CSS:Cascading Style Sheet 级联/层叠样式表
它是用来给我们的HTML做美化的,事实上HTML也能做一些美化,但是为什么单独提出来CSS呢,因为降低耦合,面向对象。
CSS的样式非常丰富,这是HTML不可比拟。
CSS的文件格式:.css
2. 掌握CSS的基本语法
// 选择器:选中要美化的元素
// 声明:就是要给选中的元素美化什么?美化成啥样?
选择器{
声明1; // 属性名:属性值;
声明2;
声明3
}
示例:要求将p标签内的字体颜色设置为红色
p{
color:red;
}
CSS使用示例:
<!-- HTML中 标签都有特别的含义 我们如果想编写CSS代码就需要在特别的标签中使用 -->
<!--
style标签是用来专门编写CSS样式代码的
规范来讲它需要放置在head标签内
-->
<style>
h3{
/* 设置字体颜色为红色 */
color:red;
}
</style>
3. 掌握CSS的引入方式
-
**行内样式表:**直接在标签中通过
style
属性设置样式,每一个HTML标签都有此属性。<!-- 行内样式表 优点:直接 直观 缺点:耦合导致阅读困难、它只能对单个标签设立样式 --> <h3 style="color: red;">夏日绝句</h3>
-
**内部样式表:**在
head
标签中添加style
标签,然后编写完整的CSS语法。<!-- 内部样式表 --> <style type="text/css"> h3{ color: yellow; } </style>
-
外部样式表:
- 本项目中的css文件
- 公网的css链接(CDN加速)
<!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对,也可以在其他服务器上) --> <!-- [最常用]它是多种CSS引入方式中最常用的 它也是外部样式表引入的最常用的--> <!--<link rel="stylesheet" type="text/css" href="css/index.css"/>--> <style type="text/css"> /* CSS语法 用来引入外部样式文件时 如果出现不兼容CSS 2.x语法时 将无法使用 */ @import url("css/index.css"); </style>
**三种引入方式的优先级:**行内样式表优先级最高 > 内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的,后面的相同设置会覆盖前面的)
4. 掌握CSS的基本选择器
CSS中有三大基本选择器:
-
**标签选择器:**标签名就作为一种选择器,表示给对应的标签统一设置样式。 例如:h3 p
/* 标签选择器 */ h3{ color: deeppink; } p{ font-weight: bold; }
-
**类选择器:**需要借助标签的class属性 (应用最广泛的基本选择器)
/* 类选择器:.标签的class属性值 */ .poem{ font-weight: bold; } .hehe{ color: red; }
<div> <h3>夏日绝句</h3> <!-- 如果应用多个类选择器 可以以空格隔开 --> <p class="poem hehe"> 生当作人杰,死亦为鬼雄。<br/> 至今思项羽,不肯过江东。 </p> <p class="hehe"> 呵呵 </p> <p class="poem"> 哈哈 </p> </div>
-
**ID选择器:**需要借助标签的id属性(不常用)
/* ID选择器 */ #poem{ color: greenyellow; }
<!-- 严格来讲id选择器应该是唯一的 但是因为HTML是弱语法 所以你会发现ID选择器可以实现和类选择器一样的效果 --> <p id="poem"> 生当作人杰,死亦为鬼雄。<br/> 至今思项羽,不肯过江东。 </p>
**基本选择器优先级(范围越小 优先级越高):**ID选择器 > 类选择器 > 标签选择器
5. 掌握CSS的初级美化
5.1 字体美化
-
字体类型:font-family
h3{ /*font-family: "楷体";*/ /*font-family: "宋体";*/ /*font-family: "\u5b8b\u4f53";*/ /* 如果这样设置是为了防止当前面的字体无法使用时 可以作为替换性内容 */ /* 一般会对中文和英文分别设置字体 */ font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif; }
-
字体大小:font-size
font-size: 16px;
-
字体的风格:font-style
h3{ /* 默认的 */ /*font-style: normal;*/ /* 采用字体原有的斜体设计 */ /*font-style: italic;*/ /* 采用固定的倾斜角度对字体倾斜 */ /*font-style: oblique;*/ }
-
字体的粗细:font-weight
p{ /*font-weight: bold;*/ /* 加粗 */ /*font-weight: 700;*/ /* 更细的 */ font-weight: lighter; font-weight: normal; }
-
一个字体属性设置所有字体样式:font
body{ /*font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;*/ /* font-size: 12px/(行高)line-height: 1.5; */ font: 12px/1.5 tahoma,arial,"\5b8b\4f53"; }
(X)字体颜色:font-color (对勾)文本颜色:color
5.2 文本美化
-
文本颜色:color
p{ /* 可以使用关键字作为颜色值 */ /*color: orangered;*/ /* 可以使用16进制颜色值 */ /*color: #D3C294;*/ /* 配置三原色 红色 绿色 蓝色 */ /*color: rgb(255,0,0);*/ /*color: rgb(255,125,0);*/ /* alpha 透明度 0 - 1之间 值越大透明度越低 */ color: rgba(255,0,0,0.1); }
-
文本对齐方式:text-align (必须保证要设置的对齐文字是处于块元素内的)
p{ /*text-align: left;*/ /*text-align: right;*/ /*text-align: center;*/ /* 两端对齐 */ /*text-align: justify;*/ }
块元素和行内元素:
在标准文档流中,我们的HTML内的元素可以分为两大派。
-
块元素:独占一行、可以设置宽度和高度等信息。例如:div p h1-h6…
-
行内元素:多个行内元素可以在一行展示内容,它不可以设置宽度和高度等信息,内容撑开宽度和高度。 a image span…
-
文本缩进:text-indent
p{ font-size: 16px; /* 缩进 你根据字体大小计算缩进值 */ /* px是绝对单位 */ /*text-indent: 32px;*/ /* em是相对单位 它会以当前字体大小进行计算 */ text-indent: 2em; }
-
文本行高:(行间距)line-height
line-height: 30px;
-
文本装饰:text-decoration
span{ /* 下划线 */ /*text-decoration: underline;*/ /* 上划线 */ /*text-decoration: overline;*/ /* 删除线:中划线 */ /*text-decoration: line-through;*/ /* 普通文字默认情况下为none */ text-decoration: none; } a{ /* 超链接标签默认文字拥有下划线 一般我们会对其进行下划线去除 */ text-decoration: none; }
5.3 超链接美化
伪类选择器,可以应用其他的标签,但是常用于a标签。
选择器:伪类选择器名
示例: a:hover 当鼠标悬浮在超链接标签上时触发选中
-
hover 可以设置鼠标悬浮在超链接上的样式
/* 鼠标悬浮其上时触发选中 */ a:hover{ text-decoration: underline; color: orange; }
-
linked 可以设置超链接未点击前的样式(等价于标签选择器直接设置)
-
visited 可以设置超链接被点击后的样式
-
active 可以设置超链接被点击但还未释放的样式
5.4 鼠标指针
-
小手型指针
/* pointer 小手 */ cursor: pointer;
-
wait 加载中
-
help 帮助带问号
-
text 文本光标型
-
crosshair 十字型
-
default 默认光标样式
5.5 背景美化
-
**背景颜色设置:**background-color
-
**背景图片:**background-image
-
背景尺寸:background-size
-
**背景平铺:**background-repeat
-
**背景定位:**background-position
-
背景属性:background
background: url(img/arrow-right.gif) no-repeat 170px center;
6. 掌握列表的使用
在HTML中为我们准备了三种列表形式:无序列表,有序列表,定义列表。
-
无序列表:以符号为前缀的列表 (应用最广是a标签之外的最常用的)
<!-- 无序列表 默认带一个实心圆点 --> <!-- ul声明无序列表 ul标签内只能写li标签 --> <!--<ul type="square">--> <ul> <!-- li列表项 --> <li>蔡英文为2020大选大肆组织台独</li> <li>蔡徐坤幕后推手出炉</li> <li>蔡浩然明天将组织英语朗读</li> <li>蔡雷...</li> </ul>
-
有序列表:以有序的数字或者有序的符号(I II III A B C D)
<!-- 有序列表 默认为1. 2. 3.有序数列前缀 --> <ol> <li>蔡英文为2020大选大肆组织台独</li> <li>蔡徐坤幕后推手出炉</li> <li>蔡浩然明天将组织英语朗读</li> <li>蔡雷...</li> </ol>
-
定义列表:带小标题的列表形式
<dl> <!-- 标题 --> <dt>水果</dt> <!-- 标题下的列表 --> <dd>苹果</dd> <dd>香蕉</dd> <dd>西瓜</dd> <dd>胡萝卜</dd> <dt>蔬菜</dt> <dd>西红柿</dd> <dd>黄瓜</dd> <dd>冬瓜</dd> <dd>南瓜</dd> </dl>
对于列表的样式设置,CSS有专门的属性。
ul{
/* 它其实是三个子属性的集合体 但是通常用它来去除列表前缀符号 */
list-style: none;
/*list-style: amharic;*/
}