首页 > 其他分享 >前端开发-CSS

前端开发-CSS

时间:2023-04-05 18:49:00浏览次数:40  
标签:样式 书写 选择器 important 前端开发 CSS

三种CSS写法

1.在标签内书写

2.在head中书写

3.在外部文件书写

 

各种选择器

常用:类选择器,标签选择器,后代选择器

少用:ID选择器,属性选择器

 

 

 

 多个样式覆盖问题:

1.样式不同时一起作用

2.样式相同时,取style中排序后面的

3.若要强制使用,则添加important,如 color:red !important;

 

标签:样式,书写,选择器,important,前端开发,CSS
From: https://www.cnblogs.com/hhs1998/p/17290260.html

相关文章

  • js 修改当前的css
    CSSStyleSheet.insertRule()CSSStyleSheet.insertRule(".red::before{color:lightgray;content:"测试"}",0)CSSStyleSheet.addRule()已经移除废弃stylesheet.deleteRule(index)CSSStyleSheet.replace()详情见官网https://developer.mozilla.org/......
  • 怎么利用CSS实现HTML5响应式导航栏
    在html5中实现响应式导航栏的方法有很多种,如何利用纯CSS来现实这一功能,在这里小编就通过实例来和大家讲解,纯CSS实现的HTML5响应式导航栏的方法和技巧。目前响应试web页面已经逐渐开始盛行,除了将页面的内容以及布局结构实现响应试以外,剩下的重点就是实现导航栏的响应试,当然方法有很......
  • Chrome 112 发布,删除 Chrome Apps、支持 CSS 嵌套
    时隔一个月时间,Google正式发布了Chrome112版本,该版本删除了ChromeApps、支持CSS嵌套、改进了<dialog>等。ChromeApps过去,ChromeApps是一种被视为向用户提供轻量级网站体验的方式。然而,它们从未像浏览器扩展或标准网站那样大受欢迎。为了跟上时代的变化,改善用......
  • 黑马程序员前端-CSS:溢出的文字省略号显示
    按照HTML+CSS的学习顺序笔记已经更新了28篇内容了,因为篇幅问题,请看文末。目录一、单行文本溢出显示省略号二、多行文本溢出显示省略号(了解即可)三、往期合集今天来学溢出文字省略号显示。一、单行文本溢出显示省略号单行文本溢出显示省略号必须满足三个条件:/*1.先强制一行内显示文......
  • 黑马程序员前端-CSS盒子模型以及PS基础
    前端学习笔记教程不定期更新中,传送门:前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的复合选择器黑马程序员前端-CSS的显示模式黑马程序员前端-CSS背景黑马程序员前端-CSS三大特性:叠层性、继承性、优......
  • 黑马程序员前端-CSS三大特性:叠层性、继承性、优先级
    前端学习笔记教程不定期更新中,传送门:前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的复合选择器黑马程序员前端-CSS的显示模式黑马程序员前端-CSS背景上一期的CSS入门笔记没有更新完,继续更新中…今天......
  • CSS基础
    为满足网页的需要,来进行前端代码的学习CSS基础一:style<style>css标签</styte>例:对p标签进行更改<style>p{color:red;/*像素*/font-size:30px;/*背景*/background:aqua;/*宽度*/width:400px;}</style>二:引入方......
  • web前端tips:CSS之sticky粘滞效果
    Sticky介绍Sticky是CSS3的一个定位属性,它可以让元素在滚动过程中“粘”在屏幕上的某个位置,直到滚动到某个临界点后才会跟随滚动。Sticky定位可以使得页面更具交互性和易用性,也提高了页面的可读性。Sticky定位可以通过以下代码实现:position:sticky;top:0;其中,top属性定义了......
  • css3 箭头上下跳动
    .container.stepsItem.permit.permitStepItem.table.showTable{width:.37rem;margin:.20remauto;position:absolute;bottom:0;left:50%;margin-left:-.18rem;-webkit-animation:opener.5sease-in-outalternateinfinite;......
  • app直播源码,css预加载旋转动画 与 流光字体
    app直播源码,css预加载旋转动画与流光字体一、预加载旋转动画Html<viewclass="concentric_round"></view>​cssbody{}.concentric_round{width:200rpx;height:200rpx;position:relative;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);}.......