课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > java培训老师分享:CSS基础{属性:值;}
  • java培训老师分享:CSS基础{属性:值;}

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

  • 昆明达内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--零基础全日制班

Java--零基础全日制班

开班日期:12/29

Java--零基础业余班

Java--零基础业余班

开班日期:12/29

Java--周末提升班

Java--周末提升班

开班日期:12/29

Java--零基础周末班

Java--零基础周末班

开班日期:12/29

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56