CSS
CSS
程序员·小李
不知道要干什么的时候,停一停,想一想;知道想要什么的时候,努努力,拼一拼。
展开
-
css控制文本的竖直方向对齐方式
使用vertical-align可以设置文本的排版示例<p>一个<img src="/images/compatible_chrome.gif" alt="w3cschool" width="50" height="50" />默认对齐的图像。</p><p>一个<img class="text-top" src="/images/compatible_chrome.gif" alt="w3cschool" width="50" height.原创 2022-01-01 10:22:34 · 1249 阅读 · 0 评论 -
css实现文字的按单词换行
当文字一行展示不开,需要换行展示的时候,我们可以指定不要分割英文字母,而是按照单词进行换行。示例<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>样式 word-wrap: break-word;p.tes原创 2021-12-28 22:58:11 · 5175 阅读 · 0 评论 -
css径向渐变背景
径向渐变顾名思义就是沿着半径的方向渐变颜色,通常是圆形或椭圆形。示例<div id="grad1"></div>径向渐变(圆形)#grad1 { height: 200px; width: 200px; background-image: radial-gradient(circle, red, blue); }径向渐变(椭圆形)#grad1 { height: 150px; width: 200px;..原创 2021-12-28 22:35:59 · 832 阅读 · 0 评论 -
css实现圆角样式
<div>border-radius 属性允许您为元素添加圆角边框! </div>原始样式div{ border:1px solid silver; padding:10px 20px; background:#dddddd; width:300px;}原始效果修改样式div{ border:1px solid silver; padding:10px 20px; background:#dddddd; width:300px;..原创 2021-12-26 22:32:59 · 1097 阅读 · 0 评论 -
css根据链接状态设置样式
根据link, active, visited, hover可以设定链接的样式示例<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>样式a.five:link {color:#ff0000;text-decoration:none;}a.five:visited {color:#0000ff;text-decorati原创 2022-01-02 22:23:25 · 210 阅读 · 0 评论 -
css实现文字的省略与裁剪
当容器的大小不足以盛放文字的时候,可以裁剪或省略显示文字。示例<div class="test1" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><br><br><div class="test2" style="text-overflow:clip;">This is some long text th原创 2021-12-28 22:53:26 · 508 阅读 · 0 评论 -
css实现背景裁剪
前面我们通过指定background-origin指定了渲染范围,还有个类似的属性,可以选择裁剪背景图片。示例<p>没有背景剪裁 (border-box没有定义):</p><div id="example1"><h2>Lorem Ipsum Dolor</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy .原创 2021-12-28 08:22:30 · 4094 阅读 · 0 评论 -
css设置边缘图片
通过设置border-image和border属性,可以填充边缘。示例<p id="borderimg1">在这里,图像平铺(重复),以填补该地区。</p><p id="borderimg2">在这里,图像被拉伸以填补该地区</p>使用这样的原始图片填充边缘使用铺满样式border-image: url(border.png) 30 30 30 30 round;#borderimg1 { border: ...原创 2021-12-27 08:22:22 · 474 阅读 · 0 评论 -
css实现文本首行缩进
首行缩进可以通过text-indent实现示例<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in thi原创 2021-12-31 08:45:09 · 822 阅读 · 0 评论 -
css设置背景图片的大小、填充方式
我们可以指定像素值或百分比确定背景图片的大小示例<p>Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。</p>设置像素值大小样式background-size:80px 60px;body{ background:url(/try/demo_source/img_flwr.gif); background-size:80px 60px; back.原创 2021-12-27 08:47:11 · 9272 阅读 · 0 评论 -
css修饰文本下划线
示例<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><a href="www.baidu.com">This is a hyper link</a><br><a href="www.baidu.com" class="noLine">This is a hyper l原创 2021-12-31 00:46:59 · 472 阅读 · 0 评论 -
css控制字符间距
使用letter-spacing可以控制字符之间的间距示例<h1>This is heading 1</h1><h2>This is heading 2</h2>样式h1 {letter-spacing:0px;}h2 {letter-spacing:5px;}效果很明显,字符之间的间隔大小受letter-spacing的控制...原创 2021-12-31 08:49:08 · 727 阅读 · 0 评论 -
css实现英文文本大小写转换
英文文本的大小写转换可以采用text-transform实现示例<p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p>样式p.uppercase {text-transform:uppercase;}p.l原创 2021-12-31 08:41:04 · 352 阅读 · 0 评论 -
css设置背景图片
背景图片的层级:首先设置的图片资源会浮在最上层(z-index最大),否则容易被遮盖。设置两种不同的背景示例<div id="example1"><h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore mag原创 2021-12-27 08:46:40 · 58080 阅读 · 0 评论 -
css控制文本的行高
line-height可以控制文本的行高示例<p>这是一个标准行高的段落。在大多数浏览器默认行高约20 px。这是一个标准行高的段落。这是一个标准行高的段落。</p><p class="p1">这是一个更小行高的段落。这是一个更小行高的段落。这是一个更小行高的段落。这是一个更小行高的段落。</p><p class="p2">这是一个更大行高的段落。这是一个更大行高的段落。这是一个更大行高的段落。这是一个原创 2021-12-31 15:24:19 · 2032 阅读 · 0 评论 -
css修饰文本颜色
文本颜色示例<h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3>样式h1 {color:red;}h2 {color:#00ff00;}h3 {color:rgb(0,0,255);}可以使用颜色名,也可以使用十六进制符,或者rgb(0,0,0)效果...原创 2021-12-31 00:35:34 · 75 阅读 · 0 评论 -
css给文本加阴影(类似盒子阴影)
示例<h1>Text-shadow effect!</h1>阴影样式h1{ text-shadow: 10px 5px 5px gray;}效果原创 2021-12-28 22:41:35 · 116 阅读 · 0 评论 -
css定位背景图片
设置border样式后,就会出现border-box。设置padding样式后,就会出现padding-box。content-box是主要内容的部分,只要有内容填充就有content-box。注意:border-box > padding-box > content-box 三者依次是包含关系。定位背景图片指的是在哪个范围内渲染背景。示例<p>背景图像边界框的相对位置:</p><div id="div1">Lor...原创 2021-12-27 09:00:50 · 701 阅读 · 0 评论 -
css控制文本渲染的方向
使用text-direction可以控制文本的渲染方式。示例<div class="ex1">left to right</div><div class="ex2">right to left but word in order </div><div class="ex3">right to left but word reversed</div><div class="ex4">text align: ri原创 2021-12-31 09:00:44 · 263 阅读 · 0 评论 -
css实现盒子阴影
示例<div></div>原始样式div{ width:300px; height:100px; background-color:yellow;}原始效果修改样式div{ width:300px; height:100px; background-color:yellow; box-shadow: 5px 5px 10px silver;}修改效果...原创 2021-12-26 22:48:50 · 318 阅读 · 0 评论 -
css使用第三方字体
声明第三方字体@font-face{ font-family: myFirstFont; src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */}使用@font-face指定字体的名称和资源地址。使用第三方字体示例<div>使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体</div>样式div{ font-family:myFir原创 2021-12-28 23:16:02 · 1035 阅读 · 0 评论 -
css线性渐变背景
渐变色背景通过background-image指定颜色来设定,一起看看吧!渐变的方向一般我们可以指定以下几种渐变方向:示例<div id="grad1"></div>to left#grad1 { height: 200px; background-color: red; /* 不支持线性的时候显示 */ background-image: linear-gradient(to left, red , yellow);}原创 2021-12-28 08:56:34 · 794 阅读 · 0 评论