css常用

css介绍

  • 什么叫做css:

    • css是层叠样式表
    • 用来修饰HTML样式
    • css不能单独存在,必须依赖HTML
    • 多个样式定义可以层叠为一个
    • 通常存在于样式表中,即css文件
  • css的作用:修饰HTML的元素标签,让页面变的更加好看

  • 语法:

    例如:
    body{
        background-color:black ;
    }
    

css的引入:

  • css的引入方式一共有三种
  1. 内联引入
  • 内部引入就是,在标签的内部直接写css样式
  • 内部引入利用的是标签的 style 属性 :style = “background-color:black”
  • 优点:精确,直接定位对应的标签,省略选择器
  • 缺点:Css样式和HTML混为一体!后期修改代码费劲!严重的拖慢页面加载速度;作用范围小,无法形复用,Css代码冗余。
  1. 内部引入
  • 内部引入就是在同一个HTML页面内写CSS样式表;他写在HTML文件的head中,标签 style
  • 优点:在当前html文件中形成复用
  • 缺点:复用的范围小!不能跨页面复用
    Css样式表和HTML文件,没有区分开
  • 语法:在head标签中:使用style标签:直接在style标签中,使用 选择器{样式:值 ;样式:值;}
  1. 外部引入:
  • 位置:定义一个外部的样式表文件

  • 引入:

    • link 标签 引入外部的CSS样式表,link标签在head标签中
      link标签的属性:
      rel =" stylesheet" rel 属性指示被链接的文档是一个样式表:

      ​ type : 文件类型 text/css text是css的父类类型 例如:img/png video/mp4
      ​ href:引入的地址 css所在的位置路径

  • 优点:实现CSS和HTML的“分离”,外部的页面也能引用 ,即可以在同一个项目中都能引用

  • 缺点:现在没有

css的选择器

  • 选择器:让您找到想要修改的HTML元素! 分为五类

    为什么提供了这么多的选择器,让您有更多更优的手段!

    1. 基本选择器

      • 基本选择器是最常用的选择器,主要根据元素名或者class/id属性等进行查找!

        基本选择器优先级:id>class>元素>

        • 元素选择器:根据元素的名称(即标签的名称)进行选择; 作用范围整体,范围太大,不常用 元素名{}

        • id选择器:给标签添加id属性

          根据id进行选择:#id值{}

        • 类选择器:给标签添加class属性

          根据class进行选择: .class值{}

        • 全部选择器: *{ } 代表所有的选择器;越具体的选择器优先级越高;

    2. 属性选择器:属性选择器,是根据标签的属性特性进行元素查找!

      • [属性名] 找到所有具有这个属性的
      • [属性名 = 值] 找到属性 = 值的 注意:这个值加不加单引号都行
      • [属性名 * = 值] 找到包含属性,并且属性值包含 值的
      • [属性名^=值] 找到包含属性,并且属性值以 值 开头的
      • [属性名 $= 值] 找到包含属性,并且属性值以 值 结尾的
    3. 伪元素选择器 : 不能单独存在,只能依赖其他的元素选择器

      伪元素选择器,是根据元素的某一种状态,进行css属性操作,例如获取焦点,鼠标悬浮等

      • :link 选择未访问的连接 例如 a:hover{}

      • :visited 访问过的链接

      • :hover 鼠标悬浮

      • :active 正在点击,即鼠标没有松开的时候

        以上四个一起存在的时候 ,必须按照一定的顺序出现:link visited hover active

      • :focus 获取焦点,即光标所在的位置(不是鼠标的位置)

        通常是input标签的状态

      • :first-letter 第一个字

      • :first-line 第一行

      • :first-child 第一个标签,但是这个标签必须有容器标签 即:选择的元素有父容器!

        通常是 p 标签的 状态

    4. 层次选择器

      层次选择器是根据元素的关系进行元素的查找!

      • 选择器1,选择器2,选择器3{ }

        多个选择器可以在一起写,中间用“ ,”隔开

      • 选择器一 选择器二 :选择器二是选择器一的后代标签(即所有的选择器二,包括更里面的子标签),能具体到某一个具体的标签

      • 选择器一 > 选择器二 :代表只要子标签,而他更里面的不会要

      • 选择器一 + 选择器二 : 选择一的子标签二 以及之后的选择器一的同级的选择器的一

        ​ 注意:可以多级选择器一块使用 例如 选择器一 选择器二 选择器三

css的样式:

  1. 文字属性:控制字体大小、粗度、样式等!

    • font-size 字体大小
    • font-family 字体类型 默体、宋体、楷体等
    • font-style 字体斜体 : normal正常; italic斜体;
    • font-weight 字体的粗度 100~900数值 ;bold;bolder;
  2. 文本属性

    • text-decoration : 加线 下画线 也能去掉下划线 none ; underline ; overline ; blink ;
    • text-align :文本对齐 left ; right ; center 这个用的挺多,对其的是标签内的所有内容
    • text-shadow: 影阴 : x方向的偏移量 y方向的偏移量 模糊的程度 color
    • text-transform: 单词的首字母大写 capitalize; lowercase;
    • word-spacing: 单词之间的间隔 normal;固定值;
    • line-height:行高,内容自动占一行高度居中的位置; normal;固定值;
    • color: 字体颜色 不用前面不加东西的 唯一 一个不加的
  3. 背景属性:

    • background-image: url(“路径”) ;

    • background-position:可以移动背景; 改变图像在背景中的位置

      方法:x y ;注意:向右 和 向下为正 用来使用组合图片,但是容器需要有长宽

    • background-repeat: 平铺 repeat-y repeat-x repeat no-repeat; repeat (反复的意思)

    • background-color:颜色

  4. 列表属性:

    • ​ list-style-type:更换列表类型 如,将有序换成无序 none可以去掉图标
    • ​ list-style-image: 更换列表的图片 url(“图片地址”)
    • list-style-position:标识出现在列表项内容之外还是内部 inside;outside
  5. 尺寸属性:

    • 尺寸大小,有宽和高,但是我们要注意的是,什么类别的标签可以设置宽和高属性!**

      我们将标签分为三类:

      1.块标签/display:block :块标签自占一行、可以设置宽和高

      2.行内标签/dispaly:inline: 行内标签,可以多个摆放一行,但是注意***行内标签不支持宽和高设置!

      3.行内块标签/dispaly:inline-block: 属于行内标签特性,但是它可以设置宽和高属性!这点很重要,如果一行出现多个标签,又支持宽和高设置,不是浮动,必然是行内块实现!

    • height 高

    • width 宽

  6. 显示属性 : display ,以下是常用取值

    • none:不显示 **不显示,并且不占位! 注意区别于:**visibility: hidden; //隐藏位置保留

    • block:块级显示

      block元素会独占一行,block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独

      占一行。block元素可以设置margin和padding属性。

    • inline:行级显示

      inline元素不会独占一行,inline元素设置width,height属性无效。

      inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right

      都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生

      边距效果。

    • Inline-block:行级块

      简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被

      排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度

      高度特性又具有inline的同行特性。

  7. 轮廓:

    • outline-style:样式:solid(实线) / dotted(虚线) / dashed (虚线)等
    • outline-width:线宽
    • outline-color:轮廓的颜色
  8. 浮动属性:浮动是垂直排列变成水平排列的重要手段,但是要注意的是,浮动会有负面影响!

    需要清除浮动!

    • float:浮动 left 或者 right none 可以将块级元素放到一行之中
      浮动之后,需要再加一个块 然后设置清楚浮动的影响

      • 清除浮动:在浮动的标签下方。添加一个空div,找到div添加一个clear:both就可以!

      clear

    • clear:both ; 消除浮动的影响

      • 浮动有异常:会脱离原有的层
  9. Overflow: 控制多出元素部分显示!
    可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
    scroll 滚动

    • visible 默认值。内容不会被修剪,会呈现在元素框之外。
    • hidden 内容会被修剪,并且其余内容是不可见的。
    • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  10. 定位:定位属性,是为了调整元素标签的位置!想要调整位置,必须要先开position属性,否者方向属性没有作用!

    • position 必须先设置position 定位才能生效 他默认的是静态static

      • absolute 绝对定位 相对于边框 放弃占位

      • relative 相对位置,参照自己原来的位置 保留原来的位置

      • fixed 固定定位 相对于边框 放弃占位

        1、相对的位置

        ​ 绝对和固定:相对屏幕的边框

        ​ 相对:相对于原来的位置

        ​ 2、是否放弃占位:

        ​ 绝对和固定:放弃原来的占位!

        ​ 相对:保留原来的值!

        ​ 3.固定和绝对的区别!

        ​ 绝对:当屏幕产生滚动,他动!

        ​ 固定:屏幕滚定,他不动

        ​ 相对:位置的微调

        ​ 固定:广告和提示

    • left

    • top

    • right

    • bottom

      这四个样式进行控制位置

  • 总结:
    • 水平居中 的方法
      1、center标签
      2、text-align
      3、块级元素:margin :0px auto ;

css盒子模型:

  • 什么是盒子: 就是一种标签抽象化,把每个标签可以当做一个盒子,盒子的大小是标签真正的大小!盒子模型的作用,用于页面布局 排版!

  • 盒子的大小:内容+内边距+外边距+边框

  • 属性:

    • margin:外边距 auto自适应
    • padding:内边距 会影响内容的显示
      • 有两种赋值的方法:
        • 1 上下左右
        • 2 上下 左右
        • 3 上 左右 下
        • 4 上 右 下 左
      • 或者通过padding-方向 来赋值
    • border:边框 三个属性分别是 颜色 形状 大小
  • Css的属性扩展

    • 圆角: border-radius

    • 阴影: box-shadow : x y 大小 颜色

响应式页面编程

  • 如何辨识屏幕的大小

  • 媒体查询代码写在css样式中!

  • 根绝辨识进行专门的属性设置

  • 语法: screen(屏幕的意思)

@media  screen  and (条件) and(条件)
     max-width:屏幕小于指定宽度
     min-width:屏幕大于指定宽度

@media screen and (max-width:800px) and (min-width: 701px) {   
    定义css样式即可
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值