CSS选择器与标签的分类

最新推荐文章于 2022-06-19 22:15:33 发布

A程序员A

最新推荐文章于 2022-06-19 22:15:33 发布

阅读量269

点赞数

文章标签： css 分类 css3

本文链接：https://blog.csdn.net/weixin_46589981/article/details/123098951

版权

css初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初识</title>
    <style>
        div{
            color: green;
        }
    </style>
   <link rel="stylesheet" href="./css/test.css">
</head>
<body>
    <div style="color: pink;">123</div>
</body>
</html>

字体属性
font:italic 900 200px “宋体”;
/* font-size: 200px;
font-family: ‘楷体’;
font-weight: 100;
font-style: oblique; */

css外观属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外观属性</title>
    <style>
        div{
            width:500px;
            height: 500px;
            background: pink;
            color: red;
            color: rgb(255, 0, 0);
            color: rgb(100%, 0%, 0%);
            color: #ff0000;
            text-indent: 2em;
            /* line-height: 500px; */
            /* text-align: center; */
        }
        p{
            /* text-indent 首行缩进 */
            text-indent: 2em;
            text-decoration: underline;
            /* none : 默认，什么装饰都没有 */
            /* line-through: 删除线 */
            /* overline： 上划线 */
            /* underline：下划线 */
        }
    </style>
</head>
<body>
    <!-- line-height和行高相同时，垂直居中 -->
    <div>外观属性</div>
    <p>段落外观属性</p>
    <div >第二个div</div>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        div{
            width:500px;
            height: 500px;
            background: pink;
            color: red;
            color: rgb(255, 0, 0);
            color: rgb(100%, 0%, 0%);
            color: #ff0000;
            text-indent: 2em;
            /* line-height: 500px; */
            /* text-align: center; */
        }
        .ddd{
            color: pink;
            background: rgb(255, 255, 0);
        }
        .ccc{
            color: blue;
            font-family: "楷体";
        }
        #hh{
            background-color: blue;
            color: yellow;
        }
        *{
            color: yellow;
        }
    </style>
</head>
<body>
    <div>外观属性</div>
    <hr>
    <hr>
    <hr>
    <div class="ccc ddd">第二个div</div>
    <hr>
    <hr>
    <hr>
    <div class="ddd">第三个div</div>
    <hr>
    <hr>
    <hr>
    <div id="hh">第四个div</div>
</body>
</html>

复合选择器
伪类选择器
(1)、链接伪类选择器
:link /* 未访问的链接 /
:hover / 鼠标移动到链接上 /
:active / 选定的链接 /
:visited / 已访问的链接 */
注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .linkage:link{
            font-size: 50px;
            color: red;
        }
         .linkage:hover{
            font-size: 60px;
            text-decoration: overline;
        }
        .linkage:active{
            text-decoration: line-through;
        }
        .linkage:visited{
            text-decoration: overline;
        }

        p:hover{
            color: red;
        }
        p:active{
            color: green;
        }
    </style>
</head>
<body>
    <!-- :link 	/* 未访问的链接 */
    :hover 	/* 鼠标移动到链接上 */
    :active 	/* 选定的链接 */
    :visited 	/* 已访问的链接 */ -->
    <a href="#" class="linkage">百度链接链接链接
    </a>
    <p>段落外观属性</p>
</body>
</html>

(1)、块状元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/caption/form等，其中

标签是最典型的块元素。
块级元素的特点：
1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度
2、宽高可以设置
3、独占一行
4、可以容纳任意的元素（h/p元素不能容纳块状元素）
5、可以设置外边距和内边距的。
(2)、行内元素
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有、、、、、 、、、、等，其中标签最典型的行内元素。
行内元素的特点：
1、有默认的宽高，宽高是内容所撑起来的
2、宽高设置是无用的
3、相邻的行内元素或者行内块元素在同一行上显示
4、只可以容纳行内元素与内容
5、水平方向上的外边距和内边距可以设置，垂直方向设置无用
注意：

只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素
链接里面不能再放链接
a里面可以放块级元素
(3)、行内块元素
在行内元素中有几个特殊的标签——、、、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
1、有默认的宽高，是元素本身的宽高
2、宽高是可以设置的
3、相邻的行内元素或者行内块元素在同一行上显示
4、一般不容纳其他元素
5、外边距和内边距都是可以设置的
(4)、标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
此阶段，我们只需关心这三个，其他的是我们后面的工作。

css背景
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置
(1)、背景图片
语法： background-image : none | url (url)
参数： none :无背景图（默认的），url :使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。
小技巧：我们提倡背景图片后面的地址，url不要加引号。
(2)、背景平铺
语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数： repeat : 背景图像在纵向和横向上平铺（默认的），no-repeat : 背景图像不平铺，repeat-x : 背景图像在横向上平铺，repeat-y : 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

(3)、背景位置
语法：background-position : length || length，background-position : position || position
参数：length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right
说明：设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则15px一定是x坐标top是y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
(4)、背景附着
语法：background-attachment : scroll | fixed
参数：scroll : 　背景图像是随对象内容滚动fixed : 　背景图像固定
说明：设置或检索背景图像是随对象内容滚动还是固定的。
演示示例：背景
(5)、背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
background:背景颜色背景图片地址背景平铺背景滚动背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

A程序员A

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器与标签的分类

css初识<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫