CSS

CSS


 

  • 作用:美化网页(HTML) 提供更多样式功能
  • 运行机制:浏览器
  • 语法:  样式属性名:值;

 

CSS样式添加方式

  • 1.行内样式(内联样式)
<标签 style="css样式代码"></标签>
说明:html标签通用属性  style

样式例子: font-size:文字大小 值 数字px color:标签内的文字颜色 font-family:字体
background-color :颜色 背景色

 

  • 2.内嵌样式
语法格式:
选择器 : 选择标签
<!--放在head中-->

<style type="text/css">

    选择器{
            样式属性名:值;
            样式属性名:值;
            样式属性名:值;
}
</style>

 

选择器类型:

标签选择器

标签名{
      css代码  
}

 

class选择器(类选择器)

  • 1.所有html标签公共属性   class=“名字”
  • 2.使用class选择器添加样式
.class{
       css代码  
}

 

ID选择器

  • 1.所有html标签都有id属性名(id属性不能重复)
  • 2.使用id选择器添加样式
#id值{
       css代码
}

 

伪类选择器(鼠标移入选择器)

css选择器:hover{
          css样式
}

解释:当鼠标移动到选择器选择的标签上以后,才会生效,移出后消失

 

父子选择器

作用:精确选择子标签
语法:父标签(选择器)>子标签(选择器)

父标签>子标签{
          css代码
}

 

注意:行内样式style属性的方式,优先级高于内嵌样式。 

 

3.外部引入样式文件

  • 1.将公用的样式css代码放在css文件(*.css)
  • 2.在需要使用样式的html网页中,引入外部样式文件

  <link rel="stylesheet" href="外部css文件的路径">

 

常见css样式

1.文本相关

font-size:80px    字体大小

font-family:草书   字体

color:red     字体颜色

text-decoration:none 无下划线   underline  有下划线

2.边框相关

border:样式  粗细  颜色

border:solid  2px  red

width:宽

height:高

3.背景相关:

background-image:url(图片路径);     背景图片

background-repeat:no-repeat   repeat   repeat-x    repeat-y    背景平铺

background-position:center;      背景对齐位置

background-color:red    背景颜色

4.鼠标相关

cursor:pointer   wait   move  

5.其他

显示样式:display 

     inline  行内

  block  块

    none   消失(不显示),元素占用网页空间变成0

列表样式:

list-style-type:none; 取消列表默认样式

 

网页布局


 

span

特征:

  • 1.没有任何特征
  • 2.是行级元素

对网页的内容,在不改变格局情况下,样式微调

<span style="font-size: 50px; color:blue">G</span>

 

div

特征:

  • 1.没有效果
  • 2.是块级元素

样式:

width  height   边框

 

盒子模型

div空间就是盒子

内补白(内间距)padding:内容和盒子内壁之间的距离

边框border :盒子厚度

外补白(外间距)margin:盒子和外部元素距离

 

定位

绝对定位:相对于父容器(父标签)的位置

position:sbsolute;  相对父标签的位置,忽略同级别元素的位置

left: 与父容器左边的距离

top:与父容器上边的距离

z-index:数字,距离用户的层级

 

浮动定位:

float:left;将div浮动展示,变成行元素

 

 第三方样式库

草莓图标库

1.引入css样式库

 <link rel="stylesheet" href="外部css文件的路径">

 

2.使用

<span class="图标样式class名" ></span>

<span class="czs-Google" style="font-size: 30px;"></span>

 

BootStrap布局

特点:

1.使用div标签

2.使用table布局思路( 行  列 )

使用步骤

1.最外层div

class=“container”   布局内容和网页左右两侧,留白

class=“container-fluid”      宽度占用网页100%  适用于后天管理系统

2.划分行

<div class=“row”>

3.在行内部划分单元格

行内默认划分12格,最多只能用12格

<div class=“col-md-1到12的数字”>

 

CSS

上一篇:SDWebImage源码分析(一)


下一篇:【selenium学习中级篇 -26】HTMLTestRunner生成测试报告