语法： ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge参数： auto : 由浏览器确定对齐方式。对于ideographic（东亚文本）以distribute-space值对齐。对于Latin文本以center值对齐 left : 根据基本宽度左对齐 center : 根据基本宽度居中对齐。如果基本宽度小于ruby文本的宽度，那么在ruby文本的宽度中居中基本宽度 right : 根据基本宽度右对齐 distribute-letter : 如果...
语法： ruby-position : above | inline参数： above : 在基本文本上方定位ruby文本 inline : ruby文本与基本文本内联 说明： 设置或检索通过rt对象指定的注释文本或发音指南（参考ruby对象）的位置。ruby对象及rt对象请参阅我的其他著作。 对应的脚本特性为rubyPosition。请参阅我编写的其他书目。 示例： ruby { ruby-position: above; }ruby-position 指定注意的位置时使用。<设置或检索通过rt对象指定的注释文本或发音指...
语法：layout-flow : horizontal | vertical-ideographic参数：horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系vertical-ideographic : 对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系说明：设置或检索对象内文本的流动和方向。当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。对应的脚本特性为layoutFlow。请参阅我编写的其他书目。当此属性...
我在做网页时使用p{writing-mode:tb-rl;}时，风页中显示的汉字是坚排且正常显示，但我在做我的校内网时，在我的涂鸦板中加入这段代码*textrea{writing-mode:tb-rl;} 希望我的留言板坚棑，但结果是字是坚排了，但看着字是躺着的，即汉字顺时针旋转了90度，请问下这是为什么，应该怎么处理？writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：p{ writing-mode: tb-rl; }可以结合direction...
CSS direction属性简单好记，属性值少，兼容性好，关键时候省心省力，是时候给大家宣传宣传，不要埋没了人家的特殊技能。语法： direction : ltr | rtl | inherit参数： ltr : 文本流从左到右rtl : 文本流从右到左inherit : 文本流的值不可继承 说明： 用于设置文本流的方向。假如您想应用direction属性于内联文本，您必须设定unicode-bidi属性为embed或bidi-override。 对应的脚本特性为direction。请参阅我编写的其他书目...
flex 布局是 css3 中使用最频繁也是最出色的功能，有点复杂，分为应用在容器上的属性和项目上的属性，即父元素上的与子元素上的属性。父元素上的属性display: flex<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> <p> <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b> </p></body>当父元素设置为 flex 后，其父元素自身会表现成块级元素，如果想表现...
这篇文章主要介绍了CSS实现鼠标上移图标旋转效果,需要的朋友可以参考下鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，比如：接下来就是要使用css实现鼠标上移图标旋转效果。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p,img,body{ margin: 0; padding: 0; } .box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; paddi...
什么是样式表CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。如何将样式表加入您的网页你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅important声明。链入外部样式表文件 (Linking to a Style Sheet)你可以先建立外部样式表文件（...
近年来 HTML5 和 CSS3 发展迅速，国内外不乏一些大站，酷站都在使用最新的技术，各家厂商的浏览器对它们的兼容性越来越好。CSS3中有一个强大的属性 Transform。有了这个特性，各种特效轻松搞定。引用一句歌词“旋转，跳跃，我不停歇”。从字面上就能看出，Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。下面的内容就来聊聊CSS3中的这个重要的属性。首先可以学习G...
CSS之cursor属性 今天学习了CSS的cursor属性，第一篇博客就用来总结它吧。cursor属性用于控制光标的显示样式，可取的值有这些：cursor:url()*|{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}*表示至少写一个该值，url后面可再选{}内的一个值。 1 <!DOCTYPE html>2...
近年来 HTML5 和 CSS3 发展迅速，国内外不乏一些大站，酷站都在使用最新的技术，各家厂商的浏览器对它们的兼容性越来越好。CSS3中有一个强大的属性 Transform。有了这个特性，各种特效轻松搞定。引用一句歌词“旋转，跳跃，我不停歇”。从字面上就能看出，Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。下面的内容就来聊聊CSS3中的这个重要的属性。首先可以学习G...
CSS中zoom:1的作用兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。比如，本站使用p做一行两列显示，HTML代码：<div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li> <li><a href="#" style="color:#0000FF" target="_blank">原创< /a>...
忙里偷闲，最近又在看许多比较酷炫的效果。现在基于jquery的插件比较多，但是很多插件的兼容性不是太好，所以原生的才是王道。在日常当中，毛玻璃已经不常见了，那是一个很久远年代的东西了。诺，下面就是毛玻璃：哈哈，不闲扯了，接下来不如正题吧，先看一下终极效果：嗯，好了，，开始我们的步骤吧：第一步：进行页面的基本搭建：我在body上设置了一张大大的背景图，然后中间部分是一个p,html代码如下：<body> <p >iPhone 7 dram...
CSS3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 文字未免听起来比较晦涩，便于理解，这里附上一个小例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <style> .demo ...
导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用于某一个网页，定义方式为在head头部添加style标签，在style标签中即可添加页面样式。<head><style>table {background: #003366;}</style> </head>选择器知识点元素属性选择器1）普通标签选择器table:{bac...