样式表三种写法1内联写法：style直接写在标签内。个人感觉多用于个别标签，一般情况优先级较高style="font-size:16px;"2内嵌写法：写在<head></head>标签内。个人感觉多用于较多或通用的一类标签，用来减少工作量<style type="text/css">{}</style>分为三种：标签选择器<style type="text/css"> 标签名（类如div）{ }</style> 类选择器<style type="text/css"> .class{}</style> id选择器<style type="text/css"> #id{ }<...
<!DOCTYPE html>CSS4-布局1-基本属性属性：displayvisibilityfloatclearHTML元素类型：行内元素，块级元素块级元素：最大的区别：换行行内元素：不换号<style>div{background:#f00;width:200px;height:100px;}span{background:#0f0;width:200px;height:100px;}/*display*/div{display:inline;} /*元素转为行内*/span{display:block;}/*元素转为块级*/div,span{display:inline-block;}/*元素转为行内块级综合，IE6/7不支持块级元素转...
1.让文字不可选中-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;2.safari点击区域阴影去除 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);原文：https://www.cnblogs.com/cococe/p/10308901.html
一、颜色属性650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109104230227.jpg" title="5.png" />demo.html<!doctype html> <html> <head> <title>CSS的颜色属性的四种方式</title> <meta charset="utf-8"> <style type="text/css"> body{ color:red } .c1{ color:#ff6600 } ...
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像，这里我记录的是利用这个content属性来在项目前插入项目编号，同时可以利用content属性在字符串两边加上括号。1.在多个标题前加上连续编号<style type="text/css"> h1:before{ content:counter(mycounter); }</style> 2.在项目编号中追加文字h1:before{ content:‘第‘counter(mycounter)‘章‘;} 3.指定编号的样式例如：使得编号后面...
文字阴影text-shadow：h-shadow/v-shadow h-shadow 水平阴影，允许负值，正数时阴影在右，负数时阴影在左v-shadow 垂直阴影，允许负值，正数时阴影在底部，负数时阴影在上面 水平和垂直阴影必须要写 blur 模糊距离，只能是正数color 阴影颜色 盒子阴影box-shadow 默认时外阴影（六个属性值，前四个是value,color，inset） 1）阴影离开盒子时的横向距离2）阴影离开盒子时的纵向距离3）阴影的模糊半...
1、在<img>标签中的使用 alt：全称为alttext，实质是当图片无法正确显示时用于替换（在IE下同时起到了title的作用，即鼠标滑过时文字提示）； title：鼠标经过时文字提示，可在重要的图片（logo）或用户会体验到的图片内容加上；2、在其他方面的应用alt：只能用在<image>、<input>、<area>元素中，替代不能显示的图片，<input>是图片按钮的作用；title：可用在除html、head、meta、base、basefont、param、script和title标签...
一直以来，CSS中最让我纠结的莫过于position属性和index属性。在写网页的时候用这两个属性都达不到想要的效果，或者达到了想要的效果但是影响到其他标签的位置，又或是达到了效果不影响其他标签，但是换了其他浏览器显示又不正确。这些个问题都很头疼，不仅要求自己对position和index的用法和含义完全领会，而且要解决各个浏览器不兼容的问题。这一篇就先讲一下position的用法。position默认值是static(也就是没有定位，出现在正常...
首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline我们常用的display属性值有：inlineblockinline-blocknone把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。那么，display:inline、display:block和display:inline-block有什么区别呢？复制代码代码如下:<style>.inline{display:inline; width:100px; height:100px; padd...
以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。CSS3 动画属性@keyframes : 规定动画可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的@keyframes mymove（mymove必须定义动画的名称在） { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }@-moz-keyframes mymove /* Firefox */ { 0% {top:0px; background:red; width:100p...
一、BOM基本操作1、查看滚动条的滚动距离 window.pageXOffset/pageYOffset // IE8和IE8以下不兼容document.body/documentElement.scrollLeft/scrollTop // 兼容性比较混乱，用时取两个值相加，因为不可能同时存在两个同时有值封装兼容性方法，求滚动条滚动距离getScrollOffset()var getScrollOffset = function() {if (window.pageXOffset) {return {x: window.pageXOffset,y: window.pageYOffset}} else {return {x: document.bod...
字体相关的属性属性含义取值Font-family字体体系字体名称，宋体。。Font-size字体大小16pxFont-style是否倾斜Normal（正常）/italic（倾斜）Font-variant是否大写Normal/small-caps（小型大写）Font-weight字体粗细Normal（400）/bold（700）/bolder（更粗）/lighter 100（更细）/200..900（直接写）原文：https://www.cnblogs.com/ZhaoBa/p/14720720.html
一、CSS1&2中的文本属性(W3C标准)text-indentCSS1检索或设置对象中的文本的缩进letter-spacingCSS1检索或设置对象中的文字之间的间隔word-spacingCSS1检索或设置对象中的单词之间插入的空格数。vertical-alignCSS1/CSS2设置或检索对象内容的垂直对其方式white-spaceCSS1设置或检索对象内空格的处理方式directionCSS2检索或设置文本流的方向unicode-bidiCSS2用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用...
-------------------------------------------动画-------------------------------------------------animation:name(名字) duration（循环一次时间） timing-function（速度曲线） delay（延迟） iteration-count（循环次数） direction（是否反向播放）;两种方式：@keyframes myfirst{from {background: red;}to {background: yellow;}}@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background:...
text-size-adjust：auto | none | ' ref='nofollow'>取值：auto：文本大小根据设备尺寸进行调整。none：文本大小不会根据设备尺寸进行调整。' ref='nofollow'>：用百分比来指定文本大小在设备尺寸不同的情况下如何调整。说明：检索或设置移动端页面中对象文本的大小调整。 该属性只在移动设备上生效；如果你的页面没有定义meta viewport，此属性定义将无效；对应的脚本特性为textSizeAdjust。 user-select：none | text | all | el...