CSS技术学习小计

最新推荐文章于 2024-03-25 19:58:02 发布

谢言念

最新推荐文章于 2024-03-25 19:58:02 发布

阅读量239

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/txjytxwd/article/details/108003550

版权

Java Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括其用于增强网页样式控制的功能和样式信息与内容分离的概念。详细讲解了四种CSS样式的引用方式：内嵌式、链入式、嵌入式和导入式，并探讨了CSS选择器，如标记选择器、类选择器、id选择器和通配符选择器的使用。通过实例展示了如何应用这些选择器来定制HTML元素的样式。

摘要由CSDN通过智能技术生成

简介

CSS( Cascading Style Sheet ，层叠样式表单 ),是用于 ( 增强）控制网页样式并允许样式信息于网页内容分离的一种标记语言。
CSS定义的规则具体如下：

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

在上述的样式规则种，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和值以”键值对“的形式出现，例如字体大小、文本颜色等。属性和属性值之间用
”：“连接。
示例：

div{border:1px solid red;width: 600px;height:400px;}

CSS样式的引用方式

引入CSS的方式有4种，分别为链入式，行内式（内联样式）、内嵌式和导入式。

内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标记中，并用

<head>
 <style type="text/css">
   选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3;}
 </style>
</head>

链入式

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

嵌入式

<div type="border:1px solid red;width: 600px;height:400px;">

导入式

<style type="text/css">
  @import url("css文件路径");
</style>

CSS选择器和常用属性

标记选择器

标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

类选择器

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

id选择器

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

通配符选择器

*{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        /*1.类选择器的定义*/
        .red {
            color:red;
        }
        .green {
            color:green;
        }
        .font18 {
            font-size:18px;
        }
        /* 2.id选择器的定义 */
        #bold {
            font-weight:bold;;
        }
        #font24 {
            font-size:24px;
        }
    </style>
</head>
<body>
<!--类选择器的使用-->
<h1 class="red">标题一:class="Red",设置文字为红色。</h1>
<p class="green font18">
    段落一：class="green font18",设置文字为绿色，字号为18px.
</p>
<p class="red font18">
    段落二：class="green font18",设置文字为绿色，字号为18px.
</p>
<!--id选择器的使用-->
<p id="bold">段落1：id="bold",设置为粗体字</p>
<p id="font24">段落2：id="font24",设置字号为24</p>
<p id="font24">段落3：id="font24",设置字号为24</p>
<!--同一个标记对象不能引用多个id选择器-->
<p id="bold font24">段落4：id="bold font24",同时设置粗体和字号为24</p>
</body>
</html>

在这里插入图片描述

谢言念

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS技术学习小计

简介CSS( Cascading Style Sheet ，层叠样式表单 ),是用于 ( 增强）控制网页样式并允许样式信息于网页内容分离的一种标记语言。CSS定义的规则具体如下：选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3;}在上述的样式规则种，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和值以”键值对“的形式出现，例如字体大小、文本颜色等。属性和属性值之间用”：“连接。示例：div{border:1px solid r
复制链接

扫一扫

专栏目录