首页 > 其他分享 >CSS

CSS

时间:2023-04-16 22:48:02浏览次数:29  
标签:样式 标签 选择器 id ID CSS

1、什么是CSS

        层叠样式表,美化网页

  CSS的三种导入方式

1、内部样式

2、外部样式(链接式,导入式)

3、行内样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>导出方式</title>
 6 <!--    内部样式-->
 7 <style>
 8     h1{
 9         color: aqua;
10     }
11 </style>
12 <!--    外部样式-->
13     <link rel="stylesheet" herf="css/style.css">
14 </head>
15 <body>
16 -- 优先级:就近原则
17 -- 行内样式
18 <h1 style="color: aqua">导出方式</h1>
19 </body>
20 </html>

选择器

作用:选择页面上的某一个或者某一类元素

1、基本选择器

  • 标签选择器:
    标签选择器,会选择到页面上所有这个标签的元素
  • 类选择器:类选择器的格式.Class的名称
    • 好处:可以多个标签归类,是同一个Class,可以复用
  • id选择器:#id名称{ };  ID必须保证全局唯一

不遵循就近原则,ID选择器>类选择器>标签选择器

2、层次选择器

 

标签:样式,标签,选择器,id,ID,CSS
From: https://www.cnblogs.com/hinima/p/17324298.html

相关文章

  • 解决子级用css float浮动 而父级div没高度不能自适应高度
    解决子级对象使用cssfloat浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法。当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍。方法一:对父......
  • CSS学习7()
    1.CSS三角1.普通三角制作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS三角制作</title><style>.box1{width:0;height:0;......
  • HTML+css
    因为测试需要用到css的内容,所以开始系统学习css和js技术css有id选择器,类选择器,可以组合,也可以单独分布首先是基本的选择器h1{color:rebeccapurple;}/*类样式class=*/.f20{font-size:18px;}/*id样式id=,notcopy*/#p4{font-size:30px;......
  • 安装scss
    在vue中使用scss需要安装三个packagenode-sasssass-loaderstyle-loader网上搜到的教程都是直接安装npminstallnode-sass--save-devnpminstallsass-loader--save-devnpminstallstyle-loader--save-dev但这样安装会报一堆版本错误找了很多帖子,最终亲测有效的方......
  • 前端CSS
    目录CSS介绍CSS语法CSS实例CSS注释学习css的步骤CSS的几种引入方式行内样式内部样式外部样式CSS选择器基本选择器id选择器类选择器标签选择器通用选择器组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套分组嵌套伪类选择器伪元素选择器first-letterbefore......
  • 2023-04-14 css before after
    before在元素前,after在元素之后,使用:.or::before{width:100px;height:1px;background:#000;display:block;content:'',}.or::after{width:100px;height:1px;background:#00......
  • 关于 css 伪元素 content属性值 为中文字符时出现乱码问题的处理
    更多关于csscontent属性的介绍点我 场景:需要在右箭头(点击该箭头是可以跳转到详情页)的左侧补充一个“更多”的文字描述 在一些场景下,使用CSS去做改动会是最优的,比如无源码等 易出现乱码的代码示例i.common-right-arrow-icon{position:relative;}i.comm......
  • 使用css在元素的前面或者后面添加内容
    :before在元素前面添加内容:after在元素的后面添加内容<!DOCTYPEhtml><html><style>h1:after{content:'前面的内容';}h1:before{content:'后面的内容';}</style><body><h1>***h1内容****</h1></body></html......
  • CSS面试题
    一、4.14基础1.1、隐藏元素的方法有哪些●display:none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。●visibility:hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。●opacity:0:将元素的透明度设置为0,以此来实现元素......
  • 关于 Angular 12 的 inlineCriticalCss 选项
    inlineCriticalCss是Angular项目中的一个配置选项,用于指定是否将关键CSS内联到页面HTML中。通常情况下,网页中的CSS文件是由浏览器异步加载的,这意味着在浏览器加载完HTML后还需要额外的时间来加载CSS文件,这会导致页面的首次渲染时间较长,用户体验不佳。为了解决这个问......