CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/guokai0202/article/details/80977867

<title>样式</title>


<link href="css/waibuyabgshi.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*内部样式-级别:id选择器>class选择器>标签选择器*/
/*标签选择器；所有跟选择器名相同的标签都跟着变化*/
h4{color:#FF0000;}
p{color:#00FF66;
fout-size:15px;}
/*类选择器；class选择器属性名与标签名相同会变化；不同标签属性值可以相同*/
.blue{color:#CCCC33;}
.pink{color:#FF3366;}
/*id选择器;id选择器属性名与标签名相同会变化；id属性值是唯一的*/
#red{color:#6633FF;}
/*复合选择器*/
/*后代选择器*/
p strong{color:#0000FF;font-size:36px;}
/*交际选择器*/
p.blue{color:#FFFF00;}
/*并集选择器*/
h1,.blue,.pink,#id{font-zise:36px;}
/*span*/
p span{color:#0033FF;}
</style>
</head>
<body>
<h1 class="blue">地方</h1>
<h2 class="pink">火锅</h2>
<h3>宿舍方</h3>
<h4 id="red">你好章,美文</h4>
<p class="blue">感文章,生活情感文章,欣赏最新原创空间博客伤感日志,情感日志及爱情,友情,心情
非主流的网络日记美文,欢迎发表经典好文章,美文</p>
<p>网络日记美文,欢迎发表</p>
<p>章,欣赏最新原<strong>创空间博客</strong>伤感日志,情感日志及爱情</p>
<p>迎<span>发表</span>经典好</p>
</body>
----------------------------------

后代选择器
标签嵌套时，设嵌套标签的样式
p strong{color:blue; font-size:36px;}
如：<p>大幅度发十多天<strong>过热通过发</strong>到付的幸福的人大通过的人发电厂V型</p>
交集选择器
有两个选择器组成，第一个是标签选择器，第二个是class或id选择器，class或id在标签选择器中。
p#blue{ color:#CCFF66; font-size:12px;}
如：<p id="blue">大幅度发十多天过热通过发到付的幸福的人大通过的人发电厂V型</p>
并集选择器
#ye,h3,.wri{color:#0033FF; font-size:24px;}
如：<h2 id="ye">梵蒂冈的风格</h2>
<h3>吊死扶伤</h3>
<h4 class="wri">日发帖也挺好</h4>
<span>标签
如：<p>享受<span class=“show”>“一站式”</span>教育服务</p>
<p>在这里，有一群人默默支持你成就<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>NIIT</span>，成就你的梦想</p>
-------------------------------------

1、font-family 设置字体类型
如：font-family:"隶书";
2、font-size 设置字体大小
如：font-size:12px;
3、font-style 设置字体风格（可以设italic（斜体）；inherit；normal（正常）； oblique（倾斜））
如：font-style:italic;
4、font-weight 设置字体的粗细（可以设normal（正常）；bold（粗体）；bolder（更粗）；lighter（更细）。
如：font-weight:bold;
5、font 在一个声明中设置所有字体属性（字体属性顺序：字体风格-字体粗细-字体大小-字体类别）
如：font:oblique bold 12px "楷体";
6、p img{ vertical-align:middle;} 图片与段落水平
----------------------------------------------

1、color 设置文本颜色
如：color:#00C;
2、text-align 设置元素水平对齐方式
如：text-align:right;
3、text-indent 设置首行文本的缩进
如：text-indent:20px;
4、line-height 设置文本的行高
如：line-height:25px;
5、text-decoration 设置文本的装饰（可以设none（默认）；underline（文本下划线）；

overline（文本上划线）；line-through（删除线）；blank（设文本闪烁））
如：text-decoration:underline;
6、text-transform 字母大小写转换，首字母大写
如： p{text-transform:uppercase;}
7、letter-spacing 字间距
p{letter-spacing:10px;}
8、vertical-align 图片与文字对其方式
img{vertical-align:middle;}
9、text-shadow 设置字体阴影
p{text-shadow:10px 10px 10px blue;}
10、 word-wrap 当字超过边界自动换行
11、显示文字省略号。。。
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
-----------------------------------------

1、a:link 未单击访问时超链接样式
a:link{color:#9ef5f9;}
2、a:visited 单击访问后超链接样式
a:visited {color:#333;}
3、a:hover 鼠标悬浮其上的超链接样式
a:hover{color:#ff7300; cursor:pointer; }
鼠标悬浮图标：
default 默认光标
pointer 超链接的指针
wait 指示程序正在忙
help 指示可用的帮助
text 指示文本
crosshair 鼠标呈现十字状
4、a:active 鼠标单击未释放的超链接样式
a:active {color:#999;}
--------------------------------------------
#main{column-width:100px;}设置列宽
#main{column-count:3;}分三列
#main{column-gap:20px;}设置列间隙
#main{column-rule:;}设置列与列边框，复合属性。相当于border属性
--------------------------------------------
背景图像
background-image
属性
背景重复方式
background-repeat属性
背景定位
background-position属性
如：.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
背景图片固定,不随内容滚动而动
body{background-attachment:fixed;}
改变背景图片大小
body{background-size:width:10px;height:10px;}
-------------------------------------------------
列表样式属性
值说明语法示例
none 无标记符号 list-style-type:none;
disc 实心圆，默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal

1、list-style-position 调整列表左图标放在li标签内
ul li{list-style-position：inside;}
2、list-style-image 把自定义图片作为列表图标
如：
li {
list-style-image:url(image/arrow-right.gif);
list-style-type:circle;
}
i {
list-style-image:url(image/arrow-right.gif);
list-style-type:circle;
list-style-position:outside;
}
i {list-style:circle outside url(image/arrow-right.gif);
--------------------------------------------------
盒子模型
边框
border-color
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color

边框粗细
border-width
实例
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式
border-style
实例
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
设边框四角为圆角
border-radius
div{border-dadius：2px 2px 2px 2px;}
-------------------------------------
外边距
margin
margin-top
margin-right
margin-bottom
margin-left
margin
网页居中对齐
margin:0px auto;
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
---------------------------------
内元素不能设置宽高，不换行
内元素有（a,span,img）

display属性
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
如：
a{display:block;} 把内元素变为块元素,显示元素
div{display:none} 把元素隐藏
div{display:inline;} 把块元素变为内元素
inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
none设置元素不会被显示
display:none;
display:block;
------------------------------
浮动
float:left;
float:right;
清除浮动
clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
clear:both;清除两侧浮动
使用clear扩展盒子高度
实例：<div class="clear"></div>
.clear {
clear:both;
margin:0px;
padding:0px;
}
溢出处理(对超出外边框的内容进行处理)
overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
定位网页元素
position属性
static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
相对定位
如: div{position:relation;
left:200px;}
relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
绝对定位
absolute属性值,以body位置进行移动,若外层框架有定位，则以外层框架为坐标移动
偏移设置： left、right、top、bottom
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方
如：#div2{background-color: blue;
position: relative;
/*left: 300px;*/
top: -200px;
z-index: -1;
}
-----------------------------------
网页元素透明度
CSS设置元素透明度
opacity:x x值为0~1，值越小越透明如 opacity:0.4;
filter:alpha(opacity=x) x值为0~100，值越小越透明如 filter:alpha(opacity=40);

CSS相关知识