首页 >

css属性有哪些？css常用属性的总结（实例）

Posted on | by liu
web前端|css教程css属性有哪些？css常用属性的总结（实例）
css属性
web前端-css教程
css属性有哪些？css 属性有很多，今天在这里，我给大家总结一下我们经常用的一些css属性，包括css文本属性，css边框属性，css定位属性，列表样式等等，除此之外，还给大家介绍了一下css的写法样式。
京东产品介绍页面源码,ubuntu终端间切换,tomcat如何添加服务器,爬虫蠕动技术,php网站构建教程交流,seo定向套路lzw
常用的css属性
精易助手源码,vscode 折叠选中代码,我家云Ubuntu,tomcat没报错但是,复活远古爬虫,php 遍历结果集,seo整站优化哪家服务好,网站统计推广源码,化工网站模板免费下载lzw
1. css区块属性（*block）
淘宝网店代理代销货源整站源码,编译ubuntu内核报错,java12306爬虫,php cookie(),seo规范要求lzw
行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;

/*表格宽度自适应*/th {white-space: nowrap;}

显示 display:

none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/

2.css盒子属性（*box）

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;

3.css漂浮属性（float）

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法：

p1
p2

一个问题：

子标签使用了float时候，父标签的样式失效

    
p1
    
p2

解决方案一：clear: both

    
p1
    
p2

解决方案二：clearfix

    
p1
    
p2
.clearfix:after{    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

4.css定位属性（position）

fixed

一般用来写网页顶端的固定导航条，或者两侧的菜单。

 
导航
    
菜单
    
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网
        
php中文网

运行效果截图：

css属性有哪些？css常用属性的总结（实例）

absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

   
    
这是一个菜单

运行效果截图如下:

css属性有哪些？css常用属性的总结（实例）

5.css 透明度

.image{    opacity: 0.5}
css属性有哪些？css常用属性的总结（实例）

6.css字体属性（font）

颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: “Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)

7.css背景属性(background)

背景 background: transparent; /透视背景*/
颜色 background-color: 数值;
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重复排列-网页默认*/background-repeat : no-repeat; /*不重复排列*/background-repeat : repeat-x; /*在x轴重复排列*/background-repeat : repeat-y; /*在y轴重复排列*/

滚动 background-attachment: fixed | scroll;
位置 background-position:数值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景图片x与y轴的位置*/background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

8.css文本属性(text)

大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;

9.css边框属性（border）

边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;
简写 border: width style color;

边　　框 {border:border-width border-style color}上 边 框 {border-top:border-top-width border-style color}右 边 框 {border-right:border-right-width border-style color}下 边 框 {border-bottom:border-bottom-width border-style color}左 边 框 {border-left:border-left-width border-style color}

10.css列表样式（list-style）

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/

位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;

11.css边界属性（margin）

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

12.css填充属性（padding）

padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白

13.css垂直属性（vertical）

vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/

14.链接 （a）

a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/

15.css光标（cursor）

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;

/*也可以自定义*/cursor: hand; /*链接手指*/cursor: crosshair /*十字体 */cursor: s-resize /*箭头朝下 */cursor: move /*十字箭头, 朝右*/cursor: help /*加一问号 */cursor: w-resize /*箭头朝左 */cursor: n-resize /*箭头朝上 */cursor: ne-resize /*箭头朝右上 */cursor: nw-resize /*箭头朝左上 */cursor: text /*文字型*/cursor: se-resize /*箭头斜右下 */cursor: sw-resize /*箭头斜左下*/cursor: wait /*漏斗*/

css实践

1. css的三种写法

行内样式：写在对应标签的style属性里面

              Test                
123

内页样式：写在HTML页面里面的style标签里面

            Test                    .logo{background-color:red;            }

外部样式：通过link标签引入CSS样式

            Test                        
123
    
.logo {    background-color: red;    color: white;}

2. 常规用例

p {font-family: "sans serif";}  /*值为若干单词，则要给值加引号*/.logo {background-color: red;}.logo a,.logo p {background-color: red;}#morra {background-color: green;}a, p { color: red;}   /*a或p都使用这个css*/a p { color: red;}    /*只有a下面的p使用该css*/

注：css 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

Demo

    This is a demo                body {            background-color: #e1ddd9;            font-size: 12px;            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;            color: #564b47;            padding: 0px;            margin: 0px;        }        #inhalt {            position: absolute;            height: 200px;            width: 400px;            margin: -100px 0px 0px -200px;            top: 50%;            left: 50%;            text-align: center;            padding: 0px;            background-color: #f5f5f5;            border: 1px dotted #000000;            overflow: auto;        }        p, h1 {            margin: 0px;            padding: 10px;        }        h1 {            font-size: 11px;            text-transform: uppercase;            text-align: center;            color: #564b47;            background-color: #90897a;        }        a {            color: #ff66cc;            font-size: 11px;            background-color: transparent;            text-decoration: none;        }    
    
    
Morra's Demo

    This area should be horizontally and vertically centered.
    This text stays left aligned
    what is fantasy?

运行截图如下：

css属性有哪些？css常用属性的总结（实例）

CSS常用属性

css常用文本属性中的text-align总结说明

css属性有哪些？css常用属性的总结（实例）
  • css怎么实现浏览器默认宽度 - CSS - 前端，css 按钮点击一次禁用

    • css怎么实现浏览器默认宽度 - CSS - 前端，css 按钮点击一次禁用 | css怎么实现浏览器默认宽度 - CSS - 前端，css 按钮点击一次禁用 ...

    css属性有哪些？css常用属性的总结（实例）
  • 新年给亲戚朋友发红包的时候金额有什么讲究 - CSS - 前端，炫酷按钮纯css

    • 新年给亲戚朋友发红包的时候金额有什么讲究 - CSS - 前端，炫酷按钮纯css | 新年给亲戚朋友发红包的时候金额有什么讲究 - CSS - 前端，炫酷按钮纯css ...

    css属性有哪些？css常用属性的总结（实例）
  • 哪里有教鬼步舞的 - CSS - 前端，css3给图片设置遮罩层

    • 哪里有教鬼步舞的 - CSS - 前端，css3给图片设置遮罩层 | 哪里有教鬼步舞的 - CSS - 前端，css3给图片设置遮罩层 ...