css 基础 (1)

最新推荐文章于 2024-06-17 09:00:23 发布

.沿著記憶的路線、。

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量85

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_62675832/article/details/123100668

版权

一、css是什么？

1. html主要是用来把需要在网页展示的文本进行封装的。可以使用html的标签对封装的数据进

行简单的样式设定，但是html标签的样式太过于单一。

2.在后期的发展中，慢慢形成html标签只对要显示的数据进行封装，而把数据的样式效果

设定交给了CSS。

3. html是用来封装数据，CSS是用来给页面数据进行样式效果设定。

4.CSS：层叠样式表：主要是负责页面的样式效果设置。（Cascading Style Sheet）

5. 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML

页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用

多个外部样式表。

二、css语法

1.Css注释： /* 我是注释的内容 */

2.CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；

如：selector {declaration1; declaration2; ... declarationN }

3.选择器是最终需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（key）是设置的样式属性（style attribute）。每个属性有一个值。属性和值被

冒号分开。

选择器 { 
    声明1;
    声明2;
    声明3;
    …… 
 }
即：
 selector {
    key: value；
    key: value；
    key: value；
    ----
 }

案例：

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {

color:red; // 声明

font-size:14px;

}

三、css与html结合使用

1.内联样式、行内样式

在所有的html标签上都有style属性，这个属性就是专门用来书写CSS代码。

使用内联样式书写的css代码，直接作用于该标签。

CSS代码的书写格式：

<body>

    <div style="color:blue;">格式</ div>

<body>

注：CSS代码都是有key和value组成的声明。key可以从CSS手册查阅。而value可以由用户根据

实际的效果进行调试。

在html标签中使用style属性书写CSS代码，如果是多个CSS属性值，需要在多个属性之间

使用分号隔开。

2.内部样式

内联样式可以实现css的样式，但是如果在一个页面中有很多相同的标签都需要同一

个样式，在各自的标签内写css肯定不行，效率太低，而且html和css一起使用，看

起来很臃肿，没有做到内容与表现相分离，不建议使用。

可以在html文件中直接把CSS代码抽取出来，在head标签中书写style标签，然后在引用到

某个html标签上。

<style>

    div{
        color:yellow;
        ...
    }

</style>

3.外部样式

内部样式实现了同一页面中相同标签样式的统一，他是他的作用域仅仅是在一个页面，

如果在一个项目中，多个页面中有相同的标签，并且他们需要相同的CSS效果相同的

时候，我们可以把CSS代码单独的抽取到一个独立的CSS文件中。在需要使用CS

S代码的文件中引入这个CSS文件即可。

CSS文件中可以不用书写具体的style标签。而直接书写css代码。

引入css方式：

使用link标签引入：

在head标签中可以直接使用link标签引入外部的css文件

<head>
    
    <link rel="styplesheet" href="css/mycss.css" />

</head>

注意：link中的属性说明：

rel="stylesheet"表示连接的资源是一个样式表，即就是CSS文件,固定写法。

type 表示连接的资源是文本资源，其中放的css代码，默认，可有可无。

href表示资源的路径，css文件的地址。

④样式优先级

a. 当样式发生冲突的时候，看css代码和标签的距离，哪个样式离标签最近，就会使用冲突的

样式，-------- 就近原则。

b. 其他的样式声明不受影响。样式进行叠加展示。

4.css选择器介绍

选择器：表示当前的CSS代码要作用在具体的哪个html标签上。

下面介绍3个常用的选择器，id选择器，类选择器，标签名选择器

①标签名选择器

见名思意，就是通过标签的名字，选择最终css代码要作用的标签

Div,span -- 选择所有的div和span

Div span -- 选择的是div下面的所有的span

②id选择器

在html中，所有标签中都有一个id属性，可以根据这个id的属性值，来确定CSS代码

到底要作用在哪个标签上。

id 选择器以 "#" 来定义。要求每一个html标签的id属性值必须要唯一。

语法：

#id属性值{
    css代码
}

注意：html标签中可以书写id属性，要求在html页面上所有的标签的id值不能重复，

如果定义重复，虽然不会影响CSS的效果，但是后期学习JavaScript和DOM

技术动态根据id获取页面上的标签时就会出现错误。

记住：id唯一。

③class选择器

由于页面上的标签的id一般不会重复，使用id选择器只能给某个标签设置样式，

如果有多个标签需要相同的样式，或者不同的标签需要相同的样式，这时我们

可以使用html标签中的class属性，这时我们在css代码中就可以根据这个class

属性值来选择css代码要作用的html标签。每一个html标签都可以书写class属性。

语法：

.class属性值{
    css代码
}

④基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器

5.字体样式

6.文本样式

行高 : 指的是文本行真实高度

基线 : 并不是汉字的下端沿，而是英文字母"x"的下端沿

7.伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

①静态伪类：只能用于超链接的样式。如下：

a:link 超链接点击之前

a:visited 链接被访问过之后

以上两种样式，只能用于超链接。

②动态伪类：针对所有标签都适用的样式。如下：

a:hover “悬停”：鼠标放到标签上的时候

a:active “激活”：鼠标点击标签，但是不松手时

注意：伪元素是有书写顺序的： L V H A

8.背景属性

background-repeat:no-repeat; 背景图片不重复

background-position:10px 15px; 定位，指定一个元素的定位方法

9.列表样式

①列表可以分为有序列表和无序列表

有序列表：<ol></ ol>

无序列表：<ul></ ul>

具体的内容使用 <li></ li> 来进行封装

②有序列表默认使用的是数字来进行排序，可以通过 type的属性来设置展示的具体样式，

如：type="A"

③Li 默认是一个块级标签

//有序列表
<ol>
    <li></ li>
    <li></ li>
       ...
    <li></ li>
</ ol>

//无序列表
<ul>
    <li></ li>
    <li></ li>
       ...
    <li></ li>
</ ul>

.沿著記憶的路線、。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css 基础 (1)

一、css是什么？ 1. html主要是用来把需要在网页展示的文本进行封装的。可以使用html的标签对封装的数据进行简单的样式设定，但是html标签的样式太过于单一。 2.在后期的发展中，慢慢形成html标签只对要显示的数据进行封装，而把数据的样式效果设定交给了CSS。 3. html是用来封装数据，CSS是用来给页面数据进行样式效果设定。 4.CSS：层叠样式表：主要是负责页面的样式效...
复制链接

扫一扫