CSS相关知识

<!--CSS样式-->
<title>样式</title>
<!--行内样式>内部样式>外部样式-->
<!--href引用路径;rel代表使用外部样式;type文件类型-->
<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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值