html基础选择器

最新推荐文章于 2024-07-24 16:53:23 发布

梦解千愁

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量102

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/m0_60577732/article/details/119361255

版权

CSS基础选择器和文本样式

1.1 CSS:层叠样式表作用:给页面中的HTML标签设置样式

1.2 CSS语法规则

(内嵌式)css写在style标签中,style标签一般写在head标签里面,title标签下边;

(外联式):css写在一个单独的.css文件中提示:需要通过link’标签在网页中引入

(行内式):css写在标签的style属性中;之后配合js使用

1.3 常见属性:

css常见属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

(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>Document</title>
    <style>
      p {
        color: red;
        font-size: 25px;
        background-color: rgb(110, 212, 230);
        width: 200px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <p>赤焰</p>
  </body>
</html>

二,基础选择器

标签选择器

结构:标签名{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>Document</title>
    <style>
      div {
        color: red; 
      }
    </style>
  </head>
  <body>
    <div>标签选择器</div>
  </body>
</html>

类选择器

.类名{css属性名:属性值;}

作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

<head>
  <title>Document</title>
  <style>
    .box {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">类选择器</div>
</body>

所有标签都有class属性,class属性的属性值叫做类名,

类名可以重复,被多个标签调用,而且一个标签可以有多个类名,类名之间用空格隔开!

<div class="box day op">类选择器</div>

类名可以由字母,下划线,数字,中划线组成,但不能以数字和中划线开头;

id选择器

结构: #id属性值 {css属性名:属性值; }

一个便签上只能有一个id属性值,一个id选择器只能选中一个标签;

<style>
      #shenfe {
        color: red;
      }
</style>

<div id="shenfe">类选择器</div>

类与id的区别:

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名 • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

4.通配符选择器

*{ css属性名:属性值;}

梦解千愁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础选择器

CSS基础选择器和文本样式1.1 CSS:层叠样式表作用:给页面中的HTML标签设置样式1.2 CSS语法规则 (内嵌式)css写在style标签中,style标签一般写在head标签里面,title标签下边;(外联式):css写在一个单独的.css文件中提示:需要通过link’标签在网页中引入(行内式):css写在标签的style属性中;之后配合js使用1...
复制链接

扫一扫