昆明java培训
达内昆明广州春城路

18487146383

热门课程

java培训老师分享:CSS基础{属性:值;}

  • 时间:2016-10-11
  • 发布:昆明Java培训
  • 来源:达内新闻

昆明达内Java培训的老师今天给同学们分享CSS的基础{属性:值;}

1.CSS是成叠样式表(Cascading Style Sheets)的缩写.它用于定义HTML元素的显示形式.

2.将CSS引入HTML的方式有三种:

a.外部样式表:

<link rel="stylesheet" href=" "/>

b.嵌入样式表:

<style type="text/css">.....</style>

c.内联样式表:

属性名为style举例:<p style=“”></p>

3.CSS中的选择器:

A:简单选择器;

a:元素选择器;元素{属性:值; }

b:类选择器;.类名{属性:值; } 注意有个点。

c:ID选择器;#id名{属性:值; } 注意有个#,ID选择器只能被引用一次,而类选择器可以被多次引用。

d:伪类选择器;(有四个状态)1、a:link{ } (未访问的链接)

2. a:visited{ }(已访问的链接)

3. a:hover{  }(鼠标在链接上)

4. a:active{  }(激活链接)

e:伪元素选择器;1, p:first-line{ }

2,  p:first-letter{  }

4.复合选择器:

a:交集选择器:交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。

其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格。

eg:p.special{  }

h3.cls{   }

(以上选择器匹配)

<p class=“special”></p>

<h3 class=“cls”></h3>

b:并集选择器:

eg: h1,h2,h3,h4,h5,h6{   }

h2.special,.special,#one{   }

c:后代选择器:(继承最近的)后代选择器产生的影响不仅限于元素的"直接后代",而且会影响到它的"各级后代"

5.理解样式表的层叠:

层次的优先级别从小到大依次为:

外部样式表

嵌入式样式表

内联样式

如果是同一个样式表中不同选择器,优先级别从小到大依次为:

元素选择器

类别选择器

ID选择器

CSS的基本属性---文本样式

1.长度单位 1.px  2.em

2.颜色定义  color

3.设置字体样式  设置文字的字体  font-family:"黑体";

设置字体倾斜效果 font-style:Italic;

设置文字加粗效果  font-weight:bold;(粗体)  font-weight:bolder; (加粗)  

font-weight:100(范围100-900,数字越大字体越粗)

设置英文字母大小写转换  text-transform: capitalize; (单词首字母大写)

设置控制文字大小  font-size:..px/..%/..em

设置文字的装饰效果  text-decoration: one/underline/line-through(删除线)/overline(顶线);

4.设置段落样式  设置段落首行缩进 text-indent:..em(..个标准字符大小的距离)/..px;

设置字词间距离    letter-spacing(字母):..px;         word-spacing(单词):..px;    

设置段落内部的文字行高  line-height: 

控制文本的水平位置  text-align:left/right(右对齐)/center(居中)/justify(两端对齐)

设置文字与背景颜色  color:...;      background-color:...;

设置段落的垂直对齐方式  vertical-align:...;(只对表格单元格中的元素起作用)

css的基本属性---图像样式

1.设置图片边框:border-width:(粗细)   ;  border-color:(颜色)    ; border-style:(线性)    ;

不同的边框可以设置不同的样式,eg:border-left-style、     border-top-width   ....  solid实线

2.图片的缩放:width  height (百分比,像素)

3.图文混排:

文字环绕:float (浮动)  

图片与文字对齐方式:水平对齐text-align:            垂直对齐vertical-align:

4,。设置背景颜色与图像:background-color:        background-image:url(地址)

可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。

no-repeat:不平铺。

repeat-x:只沿水平方向平铺。

repeat-y:只沿垂直方向平铺。

5.设置背景图像位置:background-position:(可以设置两个值 eg:left top)

6.设置背景图片固定位置 :background-attchment:fixed;         图片滚动:scroll

补充:去掉无序列表前的小圆点,list-style: none;

上标用<sup>  eg:图像<sup>样</sup>式

定位(查看position7)

1.绝对定位:(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)

position: relative;

top:..px;

left:..px;

2.相对定位: (绝对定位的元素的位置相对于最近的已定位的元素,

如果元素没有已定位的元素,那么它的位置相对于最初的包含块。)position:absolute;

top:..px;

left:..px;

css基本属性—表格样式(les8)

1.控制表格:cellspacing:列间距   cellpadding:列的内边距

border:表格边框      bgcolor:表格颜色    border-collapse:合并相邻列的边框线

border-spacing :设置列的间距

设置表格宽度:table-layout:fixed(固定)或者auto(自动)

<thead>:表示表头      <tbody>:表示表内容       <tfoot>:表示表尾  (顺序可以不一样,但一般还是按顺序)

2.设置鼠标经过时表格的样式:a:hover

3.CSS与表单:a:制作像文字一样的按钮

transparent(透明的)设置背景透明

border:0px;    eg:<button id="" type="button" style="background: transparent;border:0px /none">......</button>

b:制作多彩下拉菜单  select option 

c:制作只有下划线的输入框  border:0px/none;

border-bottom:1px (粗细) dashed(线性) #000000(颜色);

补充:1.display:block(行级元素换成块级元素)/ inline(块级元素换成行级元素)

2.CSS3的选择器:  :nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素.

n可以是数字、关键词或公式。

用CSS设置链接与导航菜单 (les9)

1.设置超链接样式:在HTML中<a>   在CSS中还可以用伪类选择器的四个样式    a:link(未访问)    a:visited(已访问)。    

a:hover(鼠标移上去)    a:active(激活)

2.创建按钮式超链接:text-decoration: one;              a:link{  }       a:active{  }

(可以设置这些)   background: ;

color:  ;

border-right: px solid   ;

border-bottom: px solid   ;

border-left:   px solid  ;

border-top: px    。

3.制作荧光菜单: 应用无序列表,<div>,a:hover,   (查 les9)。

4.控制鼠标(cursor)指针 . {cursor: } (查属性下的其他CSS 2.0中文手册)。

5.设置项目列表格式:可以用有序列表<ol>与无序列表<ul>    用 list-style  来设置。

6.创建简单的导航菜单:  

a:垂直排列菜单

很多时候会用上 list-style-type:none其作用是去掉有序或无序列表前的数字或圆点。

b:横向菜单

实现横竖转换只需设置float:left即可,同时把宽度取消掉。

7.设置图片翻转效果:(指网页中的一个图片,在鼠标指针经过时换成另外一个图片。) 可以用hover.

补充CSS3的属性 rotate(角度)

效果:当鼠标移上去的时候,列表可以转动你设置的角度。(正为顺时针,负为逆时针,若是180度,可以看见字是倒立的。不能清楚的看见转动

,但可以看见字的变化)

transform(转换):rotate(旋转;循环使旋转;使转动;使轮流)(-20deg);   deg:程度(degree)

(查看les9-5)

CSS的盒模型 (les 10)

1.盒子的概念:在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。

一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。

2.设置边框,内边距,外边距:

a内边距(padding) padding属性可以设置1、2、3、4个属性值,分别如下:

设置1个属性值时,表示上下左右4个padding均为该值。

设置2个属性值时,前者为上下padding的值,后者为左右padding的值。

设置3个属性值时,第1个位上padding的值,第2个为左右padding的值,第3个为下padding得值。

设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。

b 外边距(margin)  margin指的是元素与元素之间的距离      margin and padding 的设置时一样的。

3.盒子之间的关系:   

标准的文档流:

<div>标记与<span>标记:div简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,

可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。

二者的区别在于div是块级元素,它包含的元素会自动换行。而span是内嵌元素,不会换行。

4.盒子在标准流中的定位原则:                     

行内元素之间的水平margin:当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。

块级元素之间的垂直margin:当两个块级元素是垂直排列,则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和,

而是两者中的较大者。

{背景定位:background-position:center;为background-position属性提供值有很多方法。首先,

可以使用一些关键字:top、bottom、left、right和center。通常,这些关键字会成对出现,

不过也不总是这样。还可以使用长度值,如100px或5cm,最后也可以使用百分数值。)

CSS盒子的浮动与定位

1.盒子的浮动(float):在标准流中,一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。

CSS中有一个float属性,默认为none,float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,

使用clear清楚浮动的影响

clear属性除了可以设置为了left和right之外,还可以设置为both,表示同时清除左右两边的影响。

position属性可以设置4个值:

static:默认值

relative:相对定位 (会相对于它原本的位置,通过偏移指定的距离,到达新的位置。不影响其他盒子)

absolute:绝对定位(其父元素的相对位置 其会影响他后面的盒子 就好像这个盒子被拿走了,

其他排在后面的盒子将填补前面的位置。)

fixed:固定定位(当滚动条滑动式其不会改变位置,会一直在那里。)

2.盒子的定位(static):

盒子的定位(relative)——left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。

3.z-index :z-index属性用于调整定位时重叠块的上下位置,z-index值大的元素位于值小的上方。(默认的z-index值为0,当两个块的z-index值一样时,

将保持原有的高低覆盖关系。)

4.盒子的display属性 :display属性的block和inline两个值,一个代表块级显示,一个代表内嵌显示。display还有个值为none,当设置为none时,

表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。

8.28

1.overflow(溢出):有四个值: visible(默认值。不剪切内容也不增加滚动条)  

hidden(隐藏内容多出的部分)  

auto (当内容多出框的时候显示出滚动条)       

scroll(始终显示滚动条)

2.display(显示):常用的值: none  :此元素不会被显示。

block :此元素将显示为块级元素,此元素前后会带有换行符

inline :此元素会被显示为内联元素,元素前后没有换行符。

inline-block :行内块元素。

3.clip(剪切):两个值: auto :对象无剪切

rect ( number number umber number ) :依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,

其中任一数值都可用auto替换,即此边不剪切。注意:检索或设置对象的可视区域。

区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。

8.29(复习)

1.height:auto

overflow:hidden       这是个组合件,其作用是:使自动变到与内部方框(或是最高的那个方框)一样高。必须一起使用。

2.定位(position)  这里的left是指:离左边多远。top是指离上边多远。

相对定位:(position:relative;)其参考点是:本身原来位置的左上角。移动后原来的那个位置会被占据。

绝对定位:(position:absolute;)其参考点是:其父元素有position的左上角。移动后原来的那个位置会空出来。

3.清除(clear)  只影响清除的本身。其意思是:想让哪块动,就在哪块上用clear。通常用clear:left;   clear:both;       

4.display(显示):          display:none; 隐藏,空间留给他们用。

visibility:hidden;  隐藏,位置空出来,仍在那里。

display:inline;此元素会被显示为内联元素,元素前后没有换行符。

display:block;此元素将显示为块级元素,此元素前后会带有换行符。

5.用iframe实现框架结构:

<iframe src=“URL” width=“x” height=“x”scrolling="[auto|yes|no]" frameborder="0|1“name="内部框架的名称”></iframe>

<a href="地址" target="内部框架的名称">文字</a>

6.opacity(不透明):值为0到1.

7.a标签的提交方式默认为get.

8.行级元素设置的width,height,是没有用的。

10月31日达内java培训新来班,你不要再错过了哟!

上一篇:StringUtils中isNotEmpty和isNotBlank有什么样的区别
下一篇:分享Elasticsearch---基础篇

昆明达内Java培训学费多少?

LinkedIn服务:三人行,必有我师【达内java培训】

Java培训:7月排行榜Go创新高Java稳第一

达内培训:怎样使java程序看起来更美观?

选择城市和中心
贵州省

广西省

海南省

台湾