第三十二篇（初识CSS）

最新推荐文章于 2024-07-17 16:33:07 发布

丶程序界的小师弟

最新推荐文章于 2024-07-17 16:33:07 发布

阅读量203

点赞数

分类专栏： Java 文章标签： java

本文链接：https://blog.csdn.net/wp_930420/article/details/91575645

版权

Java 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

初识CSS

前端的组成：

结构语言：HTML  (盖房子、毛坯房)   涉及到布局设计

表现语言：CSS (装修)

行为语言：JavaScript (安装点电梯...  基于事件的)

1. 了解CSS

CSS：Cascading Style Sheet 级联/层叠样式表

它是用来给我们的HTML做美化的，事实上HTML也能做一些美化，但是为什么单独提出来CSS呢，因为降低耦合，面向对象。

CSS的样式非常丰富，这是HTML不可比拟。

CSS的文件格式：.css

1.1 为什么要使用CSS修改样式？

通过标签设置样式和CSS修改样式的对比：

通过标签设置样式的缺点：
- 需要记忆哪些标签具有哪些属性，如果该标签没有此属性，那么设置了也没有效果
- 当需求变更时我们需要修改大量的代码，才能满足我们的需求
- 要牢记HTML只有一个作用，就是用来添加语义的，所以在企业开发中修改样式都是交给CSS来做
使用CSS修改样式的优点：
- 不用记忆哪些属性属于哪些标签
- 当需求变更时我们不需要修改大量的代码就可以满足需求
- 在前端开发中可以说CSS就一个作用，就是修改样式

总结原因：

样式和内容写在一起会显得非常臃肿，使用css可以单独的将样式抽离出来，可以提高开发效率。
CSS提供了很多HTML无法完成的显示效果。
抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。

1.2 什么是CSS？

CSS（CSS样式），全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表有被我们称为CSS样式或认知的div css样式。

CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Style Sheets）。平时使用CSS布局美化网页，又可称之为CSS样式。

网页HTML中大量使用DIV、SPAN、TABLE表格等标签布局，要实现漂亮的布局（CSS宽度、CSS高度、CSS背景、CSS字体大小等样式）我们就需要CSS样式实现。同样的一组DIV标签，对应CSS样式代码不同，所得到效果也不同。我们可以比作HTML是骨架，CSS是衣服。相同HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。

在日常开发CSS时候，我们通常是HTML与CSS代码同时进行，这样易与开发不容易出错。

1.3 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 ）,把样式写在这个文件中
谁想用这个样式，谁就引入这个css文件即可。

本项目中的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>

连接式

<link rel="stylesheet" type="text/css" href="样式文件的路径"/>

导入式

<style>
      @import "css/types.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是一样的。

需要借助标签的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 鼠标指针

css常用鼠标指针形状代码

关键字	对应含义
default	默认
text	文字/编辑
auto	自动
pointer, hand(hand是IE专有)	手形
move	可移动对象
not-allowed	不允许
no-drop	无法释放
wait	等待/沙漏
help	帮助
crosshair	十字准星
n-resize	向上改变大小(North)
s_resize 与n-resize效果相同	向下改变大小(South)
w-resize	向左改变大小(West)
e-resize 与w-resize效果相同	向右改变大小(East)
nw-resize	向左上改变大小（NorthWest）
sw-resize	向左下改变大小（SouthWest）
ne-resize 与sw-resize效果相同	向右上改变大小（NorthEast）
se-resize 与nw-resize效果相同	向右下改变大小（SouthEast）
url(‘光标地址’)	自定义光标

在这里插入图片描述

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>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
</ul>

显示效果如下：
在这里插入图片描述

有序列表：以有序的数字或者有序的符号(I II III A B C D)

<!-- 有序列表 默认为1. 2. 3.有序数列前缀 -->
<ol>
    <li>第一</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;*/
}

丶程序界的小师弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三十二篇（初识CSS）

初识CSS前端的组成：结构语言：HTML (盖房子、毛坯房) 涉及到布局设计表现语言：CSS (装修)行为语言：JavaScript (安装点电梯... 基于事件的)1. 了解CSSCSS：Cascading Style Sheet 级联/层叠样式表它是用来给我们的HTML做美化的，事实上HTML也能做一些美化，但是为什么单独提出来CSS呢，因为降低耦合，面向对象。C...
复制链接

扫一扫