css

css

css：（cascading style sheets）层叠样式表，作用就是用来美化页面

css语法结构

格式：选择器{属性1：“值”；属性2：“值”}

选择器：作用：定位到摸个作用

选择器暂时理解为html标签

css的引用方式

与html语言配合使用

• 行间样式
  • 在html标签的style属性中编写css语言
  • 注意事项：几乎所有的标签都有id class style title 行间样式只对一个标签起作用

hello world

• 嵌入式
  • 在head标签中进行css语言编写，但是对整个页面所有的选择器标签都起作用

    
    
    


hello world
hello 0624班
111

• 外链式
  • 将css样式单独写在.css文件中然后再html中引入该文件
  • 使用link标签引入css文件

    
    
    
    


hello world

    hello div

• 三种模式的优先级
  • 遵循就近原则
• 三种方式的总结
  • 使用行间样式，对单个元素进行修改
  • 嵌入式，教学，单独案例
  • 外链式：（开发时推荐使用的方式）

选择器

选择器的作用就是定位到具体的某一元素

选择器类型：基本选择器（标签选择器，id选择器，类选择器），属性选择器，关系选择器......

基本选择器

• 标签选择器
  • 格式：标签名称{属性1：“值”；属性2：“值”；。。。}
  • id选择器 id选择器格式 #id{属性1：值} id值具有唯一性，尽量不要重复
  • class选择器 .class{属性1：值} class可以重复
    • 同一个标签class可以有多个值，可以分别进行优化

    
    
    


我是div
我是class1

属性选择器

根据html标签的属性进行选择

格式 标签名[属性名=“属性值”]{属性1：“值”}

= 表示整体是这个字符串

^= 表示以选定字符串开头

$= 表示以选定字符串结尾

~= 表示包含 选定的这个字符串 必须有空格隔开

    
    
    


百度
优就业
新浪

关系选择器

• 后代选择器

后代选择器 选择器1 选择器2{属性：值} （空格分隔）

注意事项忽略层级关系，就是说选择器1下的所以选择器2都会被选中，不论套了几层

    
    
    



    
hello world1
    

        
hello world2
    
    hello world3




结果：hello world1 和hello world2都被选中了

• 子元素选择器

能更加精确的定位到具体的子元素

格式:选择器1 > 选择器2 {属性：值}（大于号空格）

.c1 > p {
    color: red;
}
结果：hello world1被选中了

• 并列选择器

选择多个

格式：选择器1，选择器2，选择器3，选择器4{属性：值}（逗号分隔）

    
    
    



    我是div


    我是p

我是span
我是h1

伪类选择器和伪元素选择器

选择器 ：hover{属性：值} 鼠标移入事件

选择器 ：after{content：值} 值从后面插入

选择器 ：before{contnt：值} 值从前面插入

选择器：target{} 选择器对页面某个target元素指定样式（该元素的id被当作页面中的超链接使用）只在用户点击了超链接并跳转到target之后起作用

    
    
    


中间

选择器优先级

行间样式 1,0,0,0

id选择器 0,1,0,0

class选择器 0,0,1,0

标签选择器 0,0,0,1

关系型选择器

级别可以相加计算后的值的大小作为优先级比较

id .class{}0,1,1,0

.class .class{}0,0,2,0

颜色表示方法

• 使用十六进制
  • 是由#加三对十六进制数组成（红，绿，蓝，三原色）
  • 如果每对值相同则可以省略一个#fff黑色 #000白色
• 使用十进制
  • rgb（255,255,255）
  • 使用三个0-255的十进制数组成
• 英文单词

常用的css样式

背景属性

• 背景颜色
  • background-color: orange;
• 背景图片
  • background-image: url("../image/1.jpg");
• 是否平铺
  • background-repeat: no-repeat;
• 图片位置
  • background-position: center center;
  • x: left center right
    y: top center bottom
• 图片相对位置大小
  • background-size: 100% 100%;
• 连写方式 ：颜色 图片 是否重复 是否滚动 方位词
  • background: orange url("../image/1.jpg") no-repeat scroll center center;

字体样式

• 字体颜色
  • color
• 字体大小
  • font-size
• 字体粗细
  • font-weight ：100-900
• 字体选择
  • font-famliy
• 字体类别
  • font-style

   
    



    hello world

文本样式

• 首行缩进 几个字

  • text-indent:2em

• 文字水平居中对齐
  text-align: center

• 文字竖直居中设置行高与高度相同即可
  line-height: 100px;

• 文字以图片为的竖直方向居中
  vertical-align: middle;

• 清除下划线
  text-decoration: none

  
    



    吕布


    芜湖

哈哈哈

边框样式

• 边框样式：solid 实线，double 双实线 dotted 点划线 dashed 虚线
  border-style: solid;
• 边框颜色
  border-color: orange;
• 边框粗细
  border-width:1px;
• 连写
  border: orange solid 1px;
• 单边框设置
  border-top: pink double 10px;
• 设置边框弧度 后面的参数是半径 （可通过设置多个参数来让四个角有不同的弧度）
  border-radius: 150px;

内外间距

盒子模型

内边距padding

• 内边距是内容到边框的距离

• 注意整个元素的大小是由内容+边框+padding值
  padding: 10px;

• 一个值表示对四个内边距同时设置
  两个表示对上下，左右
  三个值表示 上， 左右，下
  四个值表示上，右，下，左

    



我是div1


    我是div2

外边距margin

• 外边距是边框外部的距离

• 可多个值同padding
  margin: 10px;

• 设置div居中
  margin: 0 auto;

盒子的大小

实际盒子的大小：边框+内外边距

元素类型

元素：html标签加内容

块元素，行内元素，行内块元素

块元素

• 支持所有的样式
• 如果不设置宽度，和父元素宽度相同
• 独占一行，即使设置了宽度业独占一行

div，d，ul，ol，h，dl，dt，dd

 
    



    我是父
    
我是儿子
我是你爸爸

行内元素

• 宽高由内容决定
• 支持部分样式（宽高，margin上下，padding上下都失效）
• 盒子并排显示
• 元素与元素之间有间隙

span ，a，i，strong，b，u

*{

margin: 0;
padding: 0;

}

清除浏览器格式

 *{
            margin: 0;
            padding: 0;
        }
        清楚浏览器格式
        .s1{
            background-color: pink;
            /*设置大小没用只与内容大小有关*/
            font-size: 35px;
            /*生效*/
            margin-left: 10px;
            /*失效*/
            margin-top: 100px;
        /*    padding同margin*/
            padding-left: 10px;
        }
        .s2{

        }
    


我是span
我是div

行内块元素

• 支持所有样式
• 如果不设置宽高，有内容确定
• 多个元素之间有间隙

img

可以将块元素，行内元素转化为行内块元素

display：

• 转为行内块元素
  • display: inline-block;
• 转为行内元素
  • display: inline;
• 转为块元素
  • display: block;
• vertical-align: top; 基线的位置

    


sss
aaa
哈哈

元素溢出overflow

• 默认值 visible hidden：隐藏 scroll：添加滚动条
  • overflow: auto;
• 标题一行省略
  • 1.规定宽高
    width: 100px;
    height: 100px;
    border: orange 1px solid;
  • 2.强制在一行显示
    white-space: nowrap;
  • 3.隐藏溢出内容
    overflow: hidden；
  • 4.ellipsis：隐藏用省略号代替 clip：不显示省略标记
    text-overflow: ellipsis;

    



    好撒看多好卡尾号的
    客户空间的厚度和我会放
    开我去分行会计费和空气很
    疯狂我去二姐和佛wqerefwqc
    ewqdsqwfewfdsfadsf

浮动

文档流

html元素从上往下，从左到右依次排序

我是span
我是a
我是div

浮动介绍

元素脱离文档流，可以先左或者向右浮动

浮动特点：

• 浮动有左浮动和右浮动
• 当碰到父元素，浮动元素，未浮动元素，都会停下来
• 没浮动元素的文字会环绕浮动元素
• 如果父元素没设置高度，所有元素都浮动那么父元素就没有高度

清除浮动

• 在父元素上清除 overflow：hidden
• 在父元素的最后一个位置添加一个空div
  • style：“clear：both”
• 使用伪元素选择器，在父元素
  • content：“”；
  • dispaly：table
  • clear：both

定位

相对定位（position: relative）

• 脱离文档流，但是文档流的位置还是占用
• 以左上为基准，对父元素进行定位
• left top right bottom

绝对定位（position: absolute）

• 脱离文档流并且不占用位置
• 以最近的已定位（相对，绝对，固定）的父元素定位，如果所有符元素都没定位，则参考浏览器
• 子绝父相

固定定位（position: fixed）

• 脱离文档流并且不占用位置
• 以浏览器进行位置参考

定位的层级关系

在元素css中定义一个z-index

z-index：值，值越大层级越高