零基础学前端开发之CSS基础

刺骨的言语ヽ痛彻心扉 2022-09-11 03:20 208阅读 0赞

第三章：CSS3样式基础

知识点：

1.CSS概念

2.CSS语法格式

3.CSS的使用

4.三类范围

为什么使用CSS

化妆前：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center]

化妆后：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

HTML语法，在网页上显示数据，第一章p br b font 第二章 table form标签。

网页增加效果，就是样式，样式相当于女孩儿化妆。  
1.CSS概念

层叠样式表（Cascading Style Sheet）

html是骨架，是内容。css是衣服，起到装饰的作用，花花绿绿的。

优势

*  内容与表现分离
 *  网页的表现统一，容易修改
 *  丰富的样式，使页面布局更加灵活
 *  减少网页的代码量，增加网页的浏览速度，节省网络带宽
 *  运用独立于页面的CSS，有利于网页被搜索引擎收录

2.语法格式

语法格式：

范围分三类

行内样式、页内样式、外部样式这三类。

**2.1行内样式**

<font color='red'><p>静夜思</font></font>
    <p style="font-style: italic;font-size: 24px;"><p

style=“属性:值;属性2:值2;属性3:值3;”

这种风格，仍然不太友好，就是HTML5标签里面包含了样式，我们的目的是让二者尽量分离,分离的好处，就是格式更为清晰。

**2.2页内样式**

页内样式的范围，比行内样式要大，在整个网页内部可以使用。

设计了一个行内样式，写了一个p标签的样式，好处是只要是p标签，都变色了。坏处呢？都变了。

h1{text-align: center;}

**4.背景样式的使用：**  
解决大图：不能显示完毕，第一种笨方法：复制、粘贴很多

第二种简单方法：直接设置body的高度为2500px;

超链接样式+导航效果：

<table id="daohang">
    			<tr>
    				<td><a href="复习.html">二次元</a></td>
    				<td><a href="index.html">脑残</a></td>
    				<td><a href="">科幻</a></td>
    				<td><a href="">搞笑</a></td>
    				<td><a href="">鬼畜</a></td>
    			</tr>
    		</table>

样式：

<style>
    			table{width:100%;border:1px solid #f00;
    			border-collapse: collapse;}
    			tr{text-align: center;}
    			td{border:1px solid #f00;height: 50px;}
    			a{text-decoration: none;font-size: 18px;}
    			a:hover{color: red;}
    		</style>

**2.3 外部样式**

比如，化妆；行内样式，像描眉一样，非常的细腻；

页内样式：像化妆的时候，向脸部图白色；

外部样式：相当于变脸的，抖音看下，男的可以变女；买个皮；  
**3.选择器类型**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]  
1.标签选择器

标签\{ 属性:值;属性2:值2;属性3:值3\}

命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名  
id选择器不可重复 独一无二

2.类选择器

类样式选择：就是给标签分类；

在设计CSS样式;text-align:center:文本居中;right:文本居右.;类样式选择器，定义之后，可以在下面多个地方进行

调用 。定义的语法格式：

.类样式名\{属性：值；属性2：属性2：值2；属性3：值3\}

调用的时候：

class=“类样式名”

3.ID选择器

ID：编号，学号、考号，都是唯一的。网页当中，我们一般用唯一标识的一个标签，使用ID选择器，用来和其他标签做区分，一般使用ID选择器的都是大范围的标签。

定义ID选择器使用\#选择器名 \{属性：值；属性2：值2；属性3：值3\}

命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于class命名  
一个标签可用多个类名 共性样式可以巧用

作业：大家可以使用截图的方式，来实现一个简单的网站页面.

**4.通配符选择器**

通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。

* {
     ``marigin: ``0``;
     ``padding``: ``0``;
    }

总结一下：

如果设置块大范围，一般使用ID选择器，它是唯一的；
    
    如果设置多个类别的时候，就使用类别选择器（类样式选择器）
    
    如果网页中有很多同类的标签有共同的样式，可以使用标签选择器。

**4.选择器使用范围**

行内样式：眼影;行内样式是style属性

页内样式：自己新衣服;页内样式，是style标签;也可以多次使用，被当前页面内的多个标签多次使用。

外部样式：租用婚纱;外部样式没有了style

外部样式的好处是，定义一次，可以被多个网页使用。

**5.选择器的优先级**

外部<页内<行内，距离最近的样式优先使用

id选择器>class选择器>标签选择器

优先级的提升

！important（仅可直接选中）：使得优先级最大

**6.字体样式**

修改字体时，只要电脑内有的字体都可以进行修改

怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体

letter-spacing:字母间距

**7.文本样式**

*  color颜色取值的格式  
    1、直接写颜色 也要复合写法 yellowgreen 黄绿色  
    2、16进制  
    3、RGB 红绿蓝 三原色  
    颜色不需要记，ui会给你的
 *  文字对齐方式  
    text-align: center 居中  
    right 右对齐  
    left 左对齐  
    对齐参照点不同 ，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念，盒子模型学完就推翻了  
    如果想要指定对齐，需要设置宽和高  
    宽：weight 高：hight
 *  text-indent 首行缩进  
    单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适  
    开启控制台进行调整
 *  line-height： 设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中
 *  设置文本装饰  
    text-decoration: line—throw 中划线  
    underline 下划线  
    overline 上划线

**8.伪类**

概念：

格式 ，加冒号

ul>li:first-child、last-child等伪类。

超链接的伪类：a:link、a:visited、a:hover、鼠标cursor:wait|pointer

a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

**9.鼠标**

鼠标指针变化

直接在style下面写属性cursor：值；

值 描述  
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。  
default 默认光标（通常是一个箭头）  
auto 默认。浏览器设置的光标。  
crosshair 光标呈现为十字线。  
pointer 光标呈现为指示链接的指针（一只手）  
move 此光标指示某对象可被移动。  
e-resize 此光标指示矩形框的边缘可被向右（东）移动。  
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。  
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。  
n-resize 此光标指示矩形框的边缘可被向上（北）移动。  
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。  
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。  
s-resize 此光标指示矩形框的边缘可被向下移动（南）。  
w-resize 此光标指示矩形框的边缘可被向左移动（西）。  
text 此光标指示文本。  
wait 此光标指示程序正忙（通常是一只表或沙漏）。  
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

**10.作业**

使用CSS类来制作京东导航  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/11fdd67141a04850accc07b1480d6121.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/067d429d6af74d7e9c75415faace2469.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/bcea1312912a4f90bd869e5d41b73479.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/f12c3555055e4537a75469922cde472c.png