CSS 四种样式表六种规则选择器五种常用样式属性

最新推荐文章于 2024-04-06 22:43:58 发布

葬歌倾城

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量1.7k

点赞数

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/qq1084517825/article/details/118968897

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NET
Framework)创建一个网页程序.添加一个html页

在这里插入图片描述

创建完成后

后面的代码都是在html文件中编写的

CSS的四种样式表:1.内联样式表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
	<body>
		<p style="color:red">这是一个p标签</p>
	</body>
</html>

CSS的四种样式表:2.嵌入样式表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p
        {
            background-color:green;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS的四种样式表:3.外部样式表

CSS文件内容（文件名style.css）

p 
{
	color:red
}

html引用CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="StyleSheet1.css" type="text/css"/>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS的四种样式表:4.输入样式表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @import url("StyleSheet1.css");
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式规则的选择器:HTML Selector

可以同时对同一类标签进行设置但是无法对单个标签进行设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p
        {
            background-color:green;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式规则的选择器:Class Selector

可以对单个标签进行设置也可以对多个标签进行,需要设置class的值.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p.P1
        {
            background-color: blue;
        }
        p.P2
        {
            background-color: red;
        }
        p.P3
        {
            background-color: green;
        }
    </style>
</head>
<body>
    <p class="P1">这是一个p标签</p>
    <p class="P2">这是一个p标签</p>
    <p class="P3">这是一个p标签</p>
    <p class="P3">这是一个p标签</p>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式规则的选择器:ID Selector

可以对单个标签进行设置也可以对多个标签进行,需要设置id的值.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #P1
        {
            background-color: green;
        }
        #P2
        {
            background-color: red;
        }
        #P3
        {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p id="P1">这是一个p标签</p>
    <p id="P2">这是一个p标签</p>
    <p id="P3">这是一个p标签</p>
    <p id="P3">这是一个p标签</p>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式规则的选择器:关联选择器

添加em为特殊关键字,使用HTML Selector 进行设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p em
        {
            background-color: green;
        }
    </style>
</head>
<body>
    <p><em>这是一个p标签</em></p>
    <p><em>这是一个p标签</em></p>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式规则的选择器:组合选择器

在HTML Selector 基础上同时对多种标签进行设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      p,div,span
      {
          background-color: blue;
      }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
    <div>这是一个div标签</div>
    <div>这是一个div标签</div>
    <span>这是一个Span标签</span>
    <span>这是一个Span标签</span>
</body>
</html>

CSS样式规则的选择器:伪元素选择器

大多数时候用于超链接文本
常用伪标签

active 选中超链接的状态
hover 光标移动到超链接上的状态
link 超连接的正常状态
visited 访问过得超链接状态
first-line 段落中的第一行文本
first-letter 段落中的第一个字母

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      a:active
      {
          background-color: blue;
      }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="#">天猫</a>
    <a href="123">淘宝</a>
    <a href="222">京东</a>
</body>
</html>

CSS样式属性:字体

Font-family 设置字体
Font-size 设置文字大小,绝对大小设置xx-small、x-small、small、medium、large、x-large、xx-large
font-style 设置字体样式 Normal Itlic 或者 Oblique(斜体)
text-decoration 设置在文本中条件下划线、上划线、中划线、闪烁效果
font-weight 设置粗体字磅值normal、bold、bolder、lighter、100-900

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
     p
     {
         font-family: 'MS UI Gothic';
         font-size:large;
         font-style: italic;
         text-decoration: blink;
         font-weight:lighter;
     }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式属性:背景

background-color 设置元素的背景色
background-image 设置元素的背景图像
background-repeat 设置背景图像是否重复出现
repeat 在水平和垂直上垂直 repeat-x 水平方向上重复 repeat-y 垂直方向上重复
backgroung-attachment 设置背景图像是否跟随内容滚动 fixed sroll
background-position 设置背景图像的水平位置和垂直位置水平:left、center、right.垂直:top、center、buttom.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p 
        {
            background-color: red;
            background-image: url(image/2.png);
            background-repeat: repeat-x;
            background-attachment: local;
            background-position: left;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

CSS样式属性:文本

word-spacing 设置单词之间的间距
letter-spacing 设置字符之间的间距
text-align 设置文本的水平对齐方式 left、right、center、justfy
text-indent 设置第一行文本的缩进值
line-height 设置文本所在行高

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p 
        {
            word-spacing: 24px;
            letter-spacing: 10px;
            text-align: right;
            text-indent:10px;
            line-height:20px;
        }
    </style>
</head>
<body>
    <p>这是 一个  p   标签</p>
    <p>这是 一个  p   标签</p>
    <p>这是 一个  p   标签</p>
</body>
</html>

CSS样式属性:位置

position 设置对象的定位方式 absolute绝对定位、relative相对定位、static无特殊定位
left 设置元素的左边水平位置
top 设置元素的顶部垂直位置
width 设置元素显示的宽度
height 设置元素显示的高度
z-index 使用定位后

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p 
        {
            position:relative;
            left:20px;
            top:20px;
            width:10px;
            height:30px;
            z-index:5;
        }
    </style>
</head>
<body>
    <p>这是 一个  p   标签</p>
    <p>这是 一个  p   标签</p>
    <p>这是 一个  p   标签</p>
</body>
</html>

CSS样式属性:边缘

margin 设置元素的边界与其他元素的空隙大小
margin-top 设置元素上边界与其他元素之间的空隙大小
margin-right 设置元素的右边界与其他元素之间的空隙大小
margin-bottom 设置元素的下边界与其他元素之间的空隙大小
margin-left 设置元素的左边界与其他元素之间的空隙大小
padding 设置元素边界与内部内容之间的空隙大小
padding -top 设置元素上边界与内部内容之间的空隙大小
padding -right 设置元素的右边界与内部内容之间的空隙大小
padding-bottom 设置元素的下边界与内部内容之间的空隙大小
padding -left 设置元素的左边界与内部内容之间的空隙大小
width 设置元素边框的宽度 thin细、medium中、thick粗
border-top-width 设置元素上边框宽度
border-right-width 设置元素右边框宽度
border-left-width 设置元素左边框宽度
border-bottom-width 设置元素下边框宽度
color 设置元素边框颜色
border-top-color 设置元素上边框颜色
border-right-color 设置元素右边框颜色
border-left-color 设置元素左边框颜色
border-bottom-color 设置元素下边框颜色
style 设置元素边框的样式 none无、dotted点线、dashed虚线、solid实线、double双线、groove凹槽、ridge凸槽、inser凸边、outset凹边

葬歌倾城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 四种样式表六种规则选择器五种常用样式属性

新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页创建完成后后面的代码都是在html文件中编写的CSS的四种样式表:1.内联样式表<!DOCTYPE html><html><head> <meta charset="utf-8" /></head> <body> <p.
复制链接

扫一扫