第三次预习——css基础，选择器，盒子模型

依然如久

已于 2022-04-15 09:41:15 修改

阅读量384

点赞数

文章标签：前端 css

于 2022-04-15 09:32:37 首次发布

本文链接：https://blog.csdn.net/liu258159/article/details/124155164

版权

css基础

1.css基本语法：

p（选择器）{    
   color（属性名）:red（属性值）;
}

2.三种使用方法

内联样式<style></style>(页面内书写，页面内使用）

<style type="text/css">
  p{
     color:red;
   }
</style>

外联样式

<link rel="stylesheet" type="text/css" href="index.css(css文件)"/>

import(一种在css中引入css的方式)

@import"./css/xxxxx.css"（文件的地址）

行内样式(标签内写，只对这个标签起作用)

<p style="color:red"></p>

选择器

1.css类名规范：

不能以数字开头
可以的特殊符号为下划线和横杠

2.基本选择器

通配选择器：* (所有标签内元素都会改变)

<style type="text/css">
*{
   color:red;
 }
</style>

元素选择器：(对标签内元素改变)

<style type="text/css">
p{
  color:red;
 }
</style>

id选择器

<head>
  <style type="text/css">
    #page{
           color:red;
         }
  </style>
</head>
<body>
   <p id="page"></p>
</body>

class选择器

<head>
  <style type="text/css">
     .text{
           color:red;
          }
  </style>
</head>
<body>
  <p class="text"></p>
</body>

群组选择器

<head>
  <style type="text/css">
     .list1 , .list2{       ----->两个列表应用相同的样式
           color:red;
           } 
  </style>
</head>
<body>
  <ul id="ul1">
    <li class="list1"></li>---------->内容为红色
    <li class="list1"></li>---------->内容为红色
  &l

最低0.47元/天解锁文章

依然如久

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次预习——css基础，选择器，盒子模型

css基础1.css基本语法：p（选择器）{ color（属性名）:red（属性值）;}2.三种使用方法内联样式<style></style>(页面内书写，页面内使用）<style type="text/css"> p{ color:red; }</style>外联样式<link/>（单独一个css文件，使用时引用）<link rel="stylesheet" type=
复制链接

扫一扫