css样式常用的样式以及选择器

最新推荐文章于 2024-07-22 14:15:06 发布

别拦着我，我要学习

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量249

点赞数

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

本文链接：https://blog.csdn.net/weixin_42596738/article/details/109833783

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css技术介绍：

css是层叠样式的表单。是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

语法规则：

选择器：浏览器根据“选择器”决定受css样式影响的HTML元素（标签）。
属性：是你要改变的样式名，并且每一个值。属性和值都被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明，例如p{color：blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号。(但尽量在每条声明的末尾都加上分号）

方式一：

<div style="border: 1px solid red">div标签1</div>
<div style="border: 1px solid red">div标签2</div>
<span style="border: 1px solid red">span标签1</span>
<span style="border: 1px solid red">span标签2</span>

方式二：

在head中定义css样式，选择器就是html标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>

方式三：

将css样式写为一个单独的css文件，再通过link标签引入服用即可
css样式文件：

div{
    border: 1px solid red;
 }
span{
    border: 1px solid red;
}

html代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式-->
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>

常用的选择器

标签名选择器
格式：标签名{
属性：值；
}
id选择器
格式：#id 属性值{
属性：值
}
class类型选择器
格式：.class属性值{
属性:值；
}
class类型选择器，可以通过class属性有效的选择性的使用这个样式
组合选择器
格式：选择器1，选择器2，选择器n{
属性：值；
}

常用的样式：

color：颜色
width：宽度
height：高度
background-color：背景颜色
font-size：字体大小
border：边框
margin left：auto /margin right：auto ：DIV居中
text-align：文本居中
text-decoration：none ：超链接去除下划线

别拦着我，我要学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式常用的样式以及选择器

css技术介绍：css是层叠样式的表单。是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。语法规则：选择器：浏览器根据“选择器”决定受css样式影响的HTML元素（标签）。属性：是你要改变的样式名，并且每一个值。属性和值都被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明，例如p{color：blue}多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号。(但尽量在每条声明的末尾都加上分号）...
复制链接

扫一扫

专栏目录