CSS

CSS伪元素详解以及伪元素与伪类的区别

前面已经介绍过CSS伪类的知识,具体可见前文 CSS伪类知识详解。 伪元素常常被误解为伪类,主要在于他们的语法相似,都是对于选择器功能的扩展,相似程度很高导致被混淆。 本文通过详细介绍伪元素和常见的使用方法,最后也会分析下伪元素与伪类的基本区别。 基本描述 CSS伪元素也是应用于选择器的关键字,允许 ......
元素 CSS

css自定义复选框和单选框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{margin:0;padding:0;box-sizing: border-box;} /*复 ......
css

React的行内样式与CSS

如何为组件添加 CSS 的 class? 传递一个字符串作为 className 属性: render() { return <span className="menu navigation-menu">Menu</span> } CSS 的 class 依赖组件的 props 或 state 的情 ......
样式 React CSS

CSS进阶

一:伪类选择器 a:hover{ color: red; background-color: #87ceee;}标签:hover 点击会出现转换效果展示: 二:显示模式 块级显示可以设置宽高(div)行内显示不可以设置宽高大小只与内容有关(span) div{ width: 400px; heigh ......
CSS

CSS笔记(待完善)

CSS笔记 css权重 ID(100)> class(10)> element(1) css最高权重 !important 块元素(block) 可以设置宽度和高度,独立成行。 h1~h6、p、div、ul、li 行内元素(内联元素、块级元素)(inline) 不可以设置宽度和高度,不独立成行 a、 ......
笔记 CSS

python-爬虫-css提取-写入csv-爬取猫眼电影榜单

猫眼有一个电影榜单top100,我们将他的榜单电影数据(电影名、主演、上映时间、豆瓣评分)抓下来保存到本地的excle中 本案例使用css方式提取页面数据,所以会用到以下库 import time import requests import parsel #解析库,解析css import csv ......
爬虫 猫眼 python 电影 css

前端开发-CSS

三种CSS写法 1.在标签内书写 2.在head中书写 3.在外部文件书写 各种选择器 常用:类选择器,标签选择器,后代选择器 少用:ID选择器,属性选择器 多个样式覆盖问题: 1.样式不同时一起作用 2.样式相同时,取style中排序后面的 3.若要强制使用,则添加important,如 colo ......
前端 CSS

js 修改当前的css

CSSStyleSheet.insertRule() CSSStyleSheet.insertRule(".red::before { color: lightgray;content:"测试" }",0) CSSStyleSheet.addRule() 已经移除废弃 stylesheet.dele ......
css js

Chrome 112 发布,删除 Chrome Apps、支持 CSS 嵌套

时隔一个月时间,Google 正式发布了 Chrome 112 版本,该版本删除了 Chrome Apps、支持 CSS 嵌套、改进了 <dialog> 等。 Chrome Apps 过去,Chrome Apps 是一种被视为向用户提供轻量级网站体验的方式。然而,它们从未像浏览器扩展或标准网站那样大 ......
Chrome Apps 112 CSS

CSS基础

为满足网页的需要,来进行前端代码的学习 CSS基础 一:style <style> css标签 </styte> 例:对p标签进行更改 <style> p{ color:red; /*像素*/ font-size: 30px; /*背景*/ background: aqua; /*宽度*/ widt ......
基础 CSS

css

/* *{ padding: 0; margin: 0; border: none; } */ /* margin: auto; =0 auto上下为0,左右自适应*/ /* body{ display: flex; justify-content: center; align-items: cen ......
css

记录-一个栗子让你彻底弄懂CSS3补间动画和逐帧动画

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS3提供了Animation关键帧动画,我们在工作中比较常用。但在写CSS动画的时候,其实Animation能实现两种动画模式: 补间动画 设置关键帧的初始状态,然后在另一个关键帧改变这个状态,比如大小、颜色、位置、透明度等,电脑将自 ......
动画 CSS3 CSS

CSS 让 div 中的 img 标签图片完全填充 div

CSS 让 div 中的 img 标签图片完全填充 divdiv 下 img 标签中的图片填充满整个 div 容器显示一、基本概述 在平时的开发中有让 div 中的 img 标签中的图片完全填充整个 div 的需求,实现方式多种多样例如可以将 img 中的图片更改为 div 容器的背景图片再利用相应 ......
div 标签 图片 CSS img

css3 箭头上下跳动

.container .stepsItem.permit .permitStepItem .table .showTable { width: .37rem; margin: .20rem auto; position: absolute; bottom: 0; left: 50%; margin- ......
箭头 上下 css3 css

CSS: position: relative absolute

<div class="course-b"> <div class="outer"> <div class="inner"></div> </div> </div> .outer{ margin: 50px; width: 200px; height: 200px; background: gray ......
position absolute relative CSS

app直播源码,css预加载旋转动画 与 流光字体

app直播源码,css预加载旋转动画 与 流光字体 一、预加载旋转动画 Html <view class="concentric_round"></view> ​css body {}.concentric_round {width: 200rpx;height: 200rpx;position: ......
流光 源码 字体 动画 app

[CSS]文字超出一行隐藏+图片居中

来自酱酱。做个记录。 .book_item > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book_item > div:nth-child(1) { display: flex; align-i ......
一行 文字 图片 CSS

css学习:加载页面出现选择哪个文件观看或下载

观察发现是文件写错了,html前没有“.” ......
页面 文件 css

css 设置 div等于屏幕的时候直角,小于屏幕圆角

.card { border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px); } clamp() clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接 ......
屏幕 圆角 直角 时候 css

CSS文本属性(文本颜色、文本对齐、装饰文本、文本缩进、行间距)

本博文介绍CSS中常用的文本属性,包括文本颜色、文本对齐、装饰文本、文本缩进和行间距。 属性 说明 属性值 color 文本颜色 颜色(如red、green)#十六进制(如#ff0000) rgb代码(如rgb(255,0,0)) text-align 文本对齐 left(默认值,左对齐) righ ......
文本 行间 属性 颜色 CSS

CSS3新增选择器(属性选择器、结构伪类选择器、伪元素选择器)

本博文介绍了CSS3中新增的选择器,包括属性选择器、两类结构伪类选择器和伪元素选择器,并对两类结构伪类选择器进行了比较。 ......
属性 元素 结构 CSS3 CSS

看懂CSS属性值定义语法

CSS属性值有专门的一套定义语法,同来表达CSS语法的合法组成。 例如线性渐变的语法为: linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> ) 如果你不理解CSS的定义语法,那相信是很难阅读上面这串代码的,我们 ......
语法 属性 CSS

css笔记

3.CSS样式 css,专门用来“美化”标签。 基础CSS,写简单页面 & 看懂 & 改。 模块,调整和修改。 3.1 快速了解 <img src="..." style="height:100px" /> <div style="color:red;">中国联通</div> 3.2 CSS应用方式 ......
笔记 css

CSS常用样式日常总结(1) - 常用样式集合

1、清除浮动 /*清除浮动*/ .clearfix:after { visibility: hidden; display: block; height: 0; font-size: 0; content: '.'; clear: both; } * html .clearfix { zoom: 1 ......
样式 常用 CSS

若分离HTML与CSS,要记得连接外部CSS文件

使用下列代码即可连接,注意CSS文件名和HTML文件名相同: <link rel="stylesheet" type="text/css" href="文件名.css"> 应放在代码头,如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta chars ......
CSS 文件 HTML

CSS中 设置( 单行、多行 )超出显示省略号

1.设置超出显示省略号 css设置超出显示省略号可分两种情况: 单行文本溢出显示省略号… 多行文本溢出显示省略号… 但使用的核心代码是一样的:需要先使用overflow:hidden;来把超出的部分隐藏,然后使用text-overflow:ellipsis;当文本超出时显示为省略号。 overflo ......
省略号 CSS

CSS2

一、CSS基础 1.CSS的编写位置 编写位置有3种 1.1行内元素 <h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1> 1.2内部样式 <style> h1 { color: red; font-size: 40px; } </style> 1 ......
CSS2 CSS

css样式表的书写规范

在学完css基础后,为了更好的写代码,学习书写规范必不可少,以下是部分规范: 命名空间规范 1.布局:以 g 为命名空间,例如:.g-wrap 、.g-header、.g-content。 2.状态:以 s 为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-selected ......
样式 css

css实践

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or ......
css

css学习

CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样。 首先,先看下面一段代码: <!DOCTYPE HTML><html><head><meta http-equiv="Content ......
css