AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS常用属性和值

2016-03-20 1451
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：



1.字体

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.         <head>  
  3.                 <title>font</title>  
  4.                 <style>  
  5.                         h1{  
  6.                             font-family:times,courter;  
  7.                             font-size:150%  
  8.                             font-style:italic;  
  9.                             font-variant:normal;  
  10.                             font-weight:normal;  
  11.                         }  
  12.                         h2{  
  13.                             font-family:serif,times;  
  14.                             font-size:1cm;  
  15.                             font-style:normal;  
  16.                             font-variant:small-caps;  
  17.                             font-weight:900;  
  18.                         }  
  19.                         p{  
  20.                               
  21.                             font:oblique small-caps bold 1cm sans-serif;  
  22.                         }  
  23.                 </style>  
  24.         </head>  
  25.         <body>  
  26.                 <h1>this is header one</h1>  
  27.                 <h2>this is header two</h2>  
  28.                 <p>this is a paragraph </p>  
  29.         </body>  
  30. </html>  

运行结果：


2.文本

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.         <head>  
  3.                 <title>text</title>  
  4.                 <style>  
  5.                          h1{  
  6.                                 letter-spacing:-3px;  
  7.                                 text-align:right;  
  8.                                 text-decoration:overline;  
  9.                          }  
  10.                          h2{  
  11.                                 letter-spacing:0.5cm;  
  12.                                 text-align:center;  
  13.                                 text-decoration:line-through;  
  14.                          }  
  15.                          p{  
  16.                                 text-align:left;  
  17.                                 text-decoration:underline;  
  18.                                 text-indent:1cm;  
  19.                                 text-transform:lowercase;  
  20.                          }  
  21.                          a{  
  22.                                 /*去掉链接下划线*/  
  23.                                 text-decoration:none;  
  24.   
  25.                                 text-indent:0.8cm;  
  26.                                 text-transform:uppercase;  
  27.                          }  
  28.   
  29.                 </style>  
  30.         </head>  
  31.         <body>  
  32.                 <h1>this is header one</h1>  
  33.                 <h2>this is header two</h2>  
  34.                 <p>this is a paragraph </p>  
  35.                 <a href="http://www.baidu.com">baidu</a>  
  36.         </body>  
  37. </html>  

运行结果：


3.背景

由于博主懒的去找背景的素材，所以运行之后，丑的不堪入目，不过重点没有错误嘛，大家关注代码所对应的效果就好了。

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.         <head>  
  3.                 <title>background</title>  
  4.                 <style>  
  5.                          body{  
  6.                                 background-color:yellow;  
  7.                                 background-image:url(a.png);  
  8.                                 background-repeat:repeat;  
  9.                                 background-attachment:fixed;  
  10.                         }  
  11.                          h1{  
  12.                                 background-color:green;  
  13.                                 background-image:url(bb.png);  
  14.                                 background-repeat:repeat-x;  
  15.                                 background-position:bottom;  
  16.                          }  
  17.                          h2{  
  18.                                 background-color:blue;  
  19.                          }  
  20.                          p{  
  21.                                 background-image:url(bb.png);  
  22.                                 background-repeat:no-repeat;  
  23.                                 height:100px;  
  24.                                 background-position:center;  
  25.                          }  
  26.                          a{  
  27.                                 background:red url(bb.png) no-repeat left center;  
  28.                                 padding:10px;  
  29.                          }  
  30. b  
  31.                 </style>  
  32.         </head>  
  33.         <body>  
  34.                 <h1>this is header one</h1>  
  35.                 <h2>this is header two</h2>  
  36.                 <p>this is a paragraph </p>  
  37.                 <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a>  
  38.               
  39.   
  40.   
  41.         </body>  
  42. </html>  

运行结果：


这张截图有点，看起来乱七八糟的，但是根据代码来找效果，也是很快的。很容易搞明白，每一句代码的意思。url就是自己随便哦添加的路径，大家不必在意。

4.边框（PS:加几句关于鼠标指针的代码）

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.         <head>  
  3.                 <title>border</title>  
  4.                 <style>  
  5.                     div{  
  6.                             width:80px;  
  7.                             height:25px;  
  8.                             border-style:solid dotted;  
  9.                             cursor:move;  
  10.                     }  
  11.                     h1{  
  12.                             border-style:solid double dashed inset;  
  13.                             border-top-style:solid;  
  14.                             border-right-style:double;  
  15.                             border-bottom-style:dashed;  
  16.                             border-left-style:inset;  
  17.                             border-width:1px 2px 3px 4px;  
  18.                             /*  
  19.                             设置边框第二种方式：  
  20.                             border-top-width:1px;  
  21.                             border-right-width:2px;  
  22.                             border-bottom-width:3px;  
  23.                             border-left-width:4px;  
  24.                             */  
  25.                             border-color:red yellow green blue;  
  26.                             cursor:wait;  
  27.                     }  
  28.                     h2{  
  29.                             border:3px solid green;  
  30.                             /*会覆盖上面的border设置*/  
  31.                             border:1px dashed red;  
  32.                             cursor:pointer;  
  33.   
  34.                     }  
  35.                           
  36.                 </style>  
  37.         </head>  
  38.         <body>  
  39.                 <div>  
  40.                         aaaaaa  
  41.                 </div>  
  42.                 <h1>this is header one</h1>  
  43.                 <h2>this is header two</h2>  
  44.         </body>  
  45. </html>  

运行结果：


当鼠标移到三个边框上时，鼠标指针会发生相应变化：分别变成移动，等待，还有小手的状态。具体参考<style>标签内的代码。

5.列表

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.         <head>  
  3.                 <title>list</title>  
  4.                 <style>  
  5.                           
  6.                 </style>  
  7.         </head>  
  8.         <body>  
  9.                 <ul style="list-style-type:none; list-style-image:url(bb.png)">  
  10.                         <li>aaaaaaaaaaaaa</li>  
  11.                         <li>aaaaaaaaaaaaa</li>  
  12.                         <li>aaaaaaaaaaaaa</li>  
  13.                         <li>aaaaaaaaaaaaa</li>  
  14.                         <li>aaaaaaaaaaaaa</li>  
  15.                         <li>aaaaaaaaaaaaa</li>  
  16.                 </ul>  
  17.                 <ol style="list-style-type:upper-roman">  
  18.                         <li>aaaaaaaaaaaaa</li>  
  19.                         <li>aaaaaaaaaaaaa</li>  
  20.                         <li>aaaaaaaaaaaaa</li>  
  21.                         <li>aaaaaaaaaaaaa</li>  
  22.                         <li>aaaaaaaaaaaaa</li>  
  23.                         <li>aaaaaaaaaaaaa</li>  
  24.                 </ol>  
  25.         </body>  
  26. </html>  

运行结果：


截图中所显示的两个列表分别是一个无序列表和一个有序列表。

但是在以后的开发中，我们基本不会使用默认的图像，都是自定义列表前面的图像。style="list-style-type:none.这句代码就是将列表前的符号风格设置为空，然后我们就可以自行添加自己需要的图像了。

文章标签：
前端开发
关键词：
CSS属性
CSS常用属性
linux_drv
目录
相关文章
我是快乐的嘟嘟
|
2月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
我是快乐的嘟嘟
61 3
gudanhero2018
|
2月前
|
前端开发
CSS属性：盒子模型
CSS属性：盒子模型
gudanhero2018
33 0
gudanhero2018
|
2月前
|
前端开发
CSS属性
CSS属性
gudanhero2018
32 0
你都不懂
|
26天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
你都不懂
22 1
六卿
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
42 3
前端基础(五)_CSS文本文字属性、背景颜色属性
html的七十二变
|
1月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中，属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括：文本属性（如 `font-family`, `color`），列表属性（如 `list-style`），表格布局属性（如 `border-collapse`），以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
html的七十二变
46 4
你都不懂
|
26天前
|
前端开发
css简写属性
css简写属性
你都不懂
28 0
神明木佑
|
1月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
神明木佑
16 0
邹荣乐
|
1月前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
35 0
神明木佑
|
1月前
|
前端开发
哪些 CSS 属性可以继承？
哪些 CSS 属性可以继承？
神明木佑
48 0