欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS2.0简单总结

程序员文章站 2022-07-02 15:28:56
CSS2.0总结CSS 指层叠样式表CSS样式css背景1、background-iamge:url(“加入图片地址”);2、background-repeat:repeat ;(表示平铺 分别可加 repeat-X,repeat-Y轴方向) 或者设置 no-repeat (不平铺);3、background-color:(表背景颜色)这个属性接受任何合法的颜色值4、backgr...

CSS2.0总结

CSS 指层叠样式表


CSS样式

css背景
1、background-iamge:url(“加入图片地址”);
2、background-repeat:repeat ;(表示平铺 分别可加 repeat-X,repeat-Y轴方向) 或者设置 no-repeat (不平铺);

<style>
background-repeat:no-repeat;
</style>

3、background-color:(表背景颜色)这个属性接受任何合法的颜色值4、background-position:(背景图定位)后边 直接跟x轴 y轴坐标。图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角

<style>
background-position:right center;
</style>

css文本

1、缩进文本text-indent 属性,该属性可以方便地实现文本缩进。通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。单位em,表示字节。text-indent 属性可以继承
2、text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。具有继承性,对于块级元素来说可以让盒子中的文字改变位置,但是对于行内元素或者行内块元素(宽高不可以设置,除非使用disply:block 或者disply:inline-block改变属性)来说是能作用于盒子。
3、line-hight:行高设置中 对于块级元素,行高可以撑起盒子高度。对于行内元素来说设置行高并不能使得合资的高度,但是盒子本身可以变化(比如通过行高设置居中,则行内元素的盒子就可以居中)。
4、font-size:加字体尺寸大小font-style:字体是否倾斜(intlic倾斜 normal正常)
font-weight:是否加粗(bold粗 bolder比较粗 normal正常)
font-family:哪种字体(宋体 ,黑体…)
综合属性font:font-style font-weight font-size/line-height font-family;前两个位置可以互换,也可以不写,font-size/line-height 例如24px/2 表示字体大小是24px 行高为字体大小的2倍。

css列表
有序列表:ol li 无序列表 ul li 自定义列表 dl dt dd其中列表前的标志可去掉
可以使用属性 list-style-type:square(设置为方块) none(无) list-style-image(将图象设置为列表项标志。) list-style-position(设置列表中列表项标志的位置.)
css表格
table,tr(行),th(第一列),td(列)border-collapse:collapse(单一边框);(属性设置是否将表格边框折叠为单一边框)
1、对齐方式:text-align(属性设置水平对齐方式,比如左对齐、右对齐或者居中) 和 vertical-align(属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐) 属性设置表格中文本的对齐方式
2、border-spacing:(设置单元格边框的距离)


盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
1、element:盒子里边的内容
2、padding:盒子的内边距(盒子边与内容之间的距离)如果给padding设置百分比,则其百分比根据父元素的宽设置,而不是高。
3、border:盒子的边框 border-style(边框的线):dotted(点画线) dashed(虚线) solid(实线)
4、margin:盒子的外边距 如果给margin设置百分比,则其百分比根据父元素的宽设置,而不是高。
5、height:内容的高度
6、width:内容的宽度

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

padding、margin都可以设置距离大小:简写为padding/margin:上 右 下 左;padding/margin:上下 左右 ;padding/margin:上 左右 下 ;border简写:1px(边框线的大小) solid(边框线的样式) red(边框线的颜色);

对于行内元素(行内块元素也属于特殊的行内元素包含其中 )来说垂直方向上的padding margin设置无效。

margin的设置会导致父子元素,兄弟元素塌陷(遵从取大值,解决办法 :给父元素设置border 或者padding)

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

边框与背景:元素的背景应当出现在边框的可见部分之间,元素的背景是内容、内边距和边框区的背景。设置背景图片之后:填充区域为padding+内容+边框部分图片平铺(边框样式参考上边)


css选择器

1、CSS 元素选择器:文档的元素就是最基本的选择器,元素选择器又称为类型选择器。

<style>
html {color:red};h1 {color:blue;}h2 {color:silver;}
</style>

2、通配符选择器:显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

<style>
*{color:red;}*{margin:0;padding:0}
</style>

3、结合选择器和声明的分组:可以使用很少的语句定义相对复杂的样式

<style>
h1, h2, h3, h4, h5, h6 {  color:gray;  background: white;  padding: 10px;  border: 1px solid black;  font-family: Verdana; 
</style> }

4、CSS 类选择器:类选择器允许以一种独立于文档元素的方式来指定样,只有适当地标记文档后,才能使用这些选择器式。该选择器可以单独使用,也可以与其他元素结合使用。

<style>
 <h1 class="important">This heading is very important.</h1>
<p class="clear">This paragraph is very important.</p>
</style>

其中important就是类名,想选中添加样式则:

<style>
 .important{     color:#ddd ;     .... }
 </style>

CSS 多个类选择器具有相同属性中间用空格隔开:

<style>
.important .clear{    font-size:24px;    ....}
</style>

5、CSS ID 选择器:ID 选择器允许以一种独立于文档元素的方式来指定样式,首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。例如:

<p id="intro">This is a paragraph of introduction.</p>
选中它的话:
<style>
#intro{    color:#eee;    .....}
</style>

与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次.不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表

6、后代选择器又称为包含选择器,后代选择器可以选择作为某元素后代的元素.在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符例如:

<div class = qa>   
<p class = hou>    我是后代    </p>
</div> 

选中后代可以是:

<style>
.qa .hou{    color:red;}
</style>

或者

<style>
.qa p{    background-color:#ddd;}
</style>

等…
7、css伪类:
(1)、:first-child 伪类来选择元素的第一个子元素

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<style>
li:first-child{    font-weight:bold;    }
</style>

(2)、:hover:当鼠标悬浮在元素上方时,向元素添加样式。
8、伪元素:(1)、":before" 伪元素可以在元素的内容前面插入新内容

<style>
h1:before{    content:url(logo.gif);}
</style>

(2)、":after" 伪元素可以在元素的内容后面插入新内容

<style>
h1:after{    content:url(logo.gif);}
</style>

浮动

flot:left/right/center;

浮动的初衷是为了实现字围效果,后应用于让块级元素并排显示

浮动会让其半脱离标准文档流,从而文字可以产生字围效果

浮动的特点:
(1)贴靠性:浮动的盒子紧紧贴靠,宽度不够自动换行
(2)包裹性:一个块级元素在不设置宽高的情况下浮动,它的宽高会尽可能小。
元素浮动会对它后面的元素造成影响,后面的元素(盒子)会钻上去占据位置,但是元素中的文字不会(依旧保持字围效果)

清除浮动对父元素 兄弟元素造成的影响:
父元素:overflow:hidden;或者加一个高度
兄弟元素:clear:both(加在第一个受影响的元素上)
行内元素设置浮动之后就可以直接设置宽高。

<div class = "flo">
<div class = "flet"></div>
<div class = "cent"></div>
<div class = "righ"></div>
</div>

三个子元素浮动:(父盒子没有设置宽高,宽尽可能大 ,高为子盒子的高度撑起来,三个盒子同时浮动会导致父类盒子高度塌陷,所以给其设置overflow:hidden(本意是超出部分隐藏,不过清除浮动造成的影响也可以))

<style>{
.flo{overflow:hidden;}
.flo .flet{flot:left;    width:120px    hight:100px    background-color:#aaa;}
.flo .cent{flot:left;    width:120px    hight:100px    background-color:#fff;}
.flo .righ{flot:left;    width:120px;    hight:100px;    background-color:#ccc}
</style>

本文地址:https://blog.csdn.net/Fairyasd/article/details/107266459