Web前端之CSS

最新推荐文章于 2024-06-20 14:28:26 发布

归去来兮★

最新推荐文章于 2024-06-20 14:28:26 发布

阅读量113

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/zhouhe_/article/details/115250336

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Web前端之CSS

一.CSS简介

是什么

层叠样式表（英文全称：Cascading Stylt Sheets）
可以干什么

简单来说就是修饰网页

怎么用(引入方式)

行内样式

<div style = "background:red;">
  123
</div>

嵌入式

<head>
  <title></title>
  <style type = "text/css">
    div{
      background:"red";
    }
  </style>
</head>

链接式

<head>
  <line rel = "stylesheet"type="text/css"href = "***.css"></line>
</head>

导入式

在css中使用相对于本css文件路径进行导入
```
@import url("style.css")
```

二**.CSS 选择器**
- 基本选择器
  - * :通配符选择器
  - element：标签选择器
  - #id：id选择器
  - .class：class 选择器
- 关系选择器
  
  基本选择器，
  
  基本选择器，
  
  基本选择器{}
- 后代选择器
  - E F:包含选择器
  - E>F：子元素选择器
- 兄弟选择器
  - E+F：直接兄弟选择器
  - E~F：所有兄弟选择器
- 伪类选择器
  
  E：hover 鼠标悬停效果
- 属性选择器
  
  E[Attr]
三.选择器权重
- 选择器权重大小
  
  !important > 行内 > id > class > 标签 > *(通配符)
- 如何计算
  
  !important：无穷大
  
  行内： 1000
  
  id： 100
  
  class|属性|伪类： 10
  
  标签： 1
  
  *： 0
  
  多个选择器之间使用时进行累加
  
  使用时比较规则：
  
  选择器权重相同时，采用“后来者居上”原则
四.标签的大小和单位
- 大小
  
  width：宽度
  
  height：高度
  
  width 和 height 的默认值时auto
  
  auto 和 % 的区别：
  
  <1 . auto:会将元素撑开置父元素的位置width，但是会减去自身的margin，padding+border
  
  <2 . %: 会将元素变成父元素一样的宽度，并且额外的空间(margin+padding+border) 会加到 width上， height = 100% 不会生效
- 单位
  
  绝对单位：不会因为其他元素的尺寸的变化而变化
  
  相对单位：根据其他元素尺寸的变化而变化
  
  px：像素（绝对单位）
  
  vw: 根据浏览器的可视化区域的宽度
  
  vh: 根据浏览器的可视化区域的高度
  
  %: 相对于父元素的宽度或字体大小
五.元素之间的转换属性
- display：none 元素隐藏
- display：block 转成块级
- display：inline 转成行级
- display：inline-block 转成行级块
六.字体样式
- 字体 font-family
- 字体大小 font-size （每个浏览起的默认大小都不一样，一般为 16 px）
- 字体粗细 font-weight
  
  bold ，100 - 900
- 文本颜色：color
  
  color：#ff0000 ==简写 #f00
  
  color：rgba(1,1,1,1)
  
  color:red
- 简写
```
font-style | font-weight | font-size | line-height | font-family
字体的简写
.font{font:italic bold 12px/1.5em arial,verdana;}
```
七.文本样式
- 文本行高 line-height
- 文本水平对齐方式 text-align
  
  left ,right, center
- 文本首行缩进 text-indent [:2em]
- 设置文本装饰 text-decoration
  
  none
  
  underline
  
  through-line
  
  overline
- 单行文本溢出处理
  
  overflow：hiddden ==> 溢出隐藏
  
  white-space ： nowrap ==> 不换行
  
  text-voerflow ： ellipsis ==> 省略号
- 显示光标类型 cursor [:pointer]
- 列表样式 list-style ： none == > 去掉

八边框

border : 1px solid #f00. => 框宽框样框色
各边框的写法

border-left

border-right

border-top

border-bottom
颜色：

默认颜色为 color

border-color：上右下左

三角

div{
            width: 0;
            height: 0;
            border: 50px solid;
            border-color: transparent transparent blue black ;
        }

九背景
- 背景色：background-color
  - background ：三种写法
- 背景图 : background-image
  - background:url(“xxx.png”)
  - 背景图的重复 background-repeat：
    
    repeat-x
    
    repeat-y
    
    no-repeat
  - 背景图的位置 background-position:x y
    
    background-position: right [center默认]
    
    background-position: 50% [50%默认]
    
    background-position: 20px 30px
  - 规定背景图尺寸 background-size
    - 关键字： contain（缩小）， cover（放大）
    - 百分比： background-size：50% [50%默认]
    - 像素：background-size：20px 30px
- 简写
  
  ●background-color:#f00;
  ●background-image:url(background.gif);
  ●background-repeat:no-repeat;
  ●background-attachment:fixed;
  ●background-position:0 0;
  　　可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
  　　语法是background:color image repeat attachment position;
  　　你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
  　　●color: transparent
  　　●image: none
  　　●repeat: repeat
  　　●attachment: scroll
  　　●position: 0% 0%
十盒模型
- 盒模型组成部分
  
  两种盒模型：
  
  w3c标准盒模型实际宽： content(width+ height). + padding + border+ margin （默认）
  
  ie盒模型实际宽： content(width+ height). + padding + border
  
  切换：
  
  w3c: box-sizing:conten-box
  
  ie: box-sizing:border-box
- 内边距 padding: 值 ==》百分比(只和父元素的width计算) ，数值，没有负数
  - padding-left
  - padding-right
  - padding-top
  - padding-buttom
  - 简写
    - padding: 10px(上) 20px(右) 30px(下) 40px(左)
    - padding: 10px(上右下左)
    - padding: 10px(上下) 20px(左右)
    - padding: 10px(上) 20px(左右) 30px(下)
- 外边距margin: 值 ==》百分比(只和父元素的width计算) ，数值，有负数
  - margin-left
  - margin-right
  - margin-top
  - margin-buttom
  - 简写
    - margin: 10px(上) 20px(右) 30px(下) 40px(左)
    - margin: 10px(上右下左)
    - margin: 10px(上下) 20px(左右)
    - margin: 10px(上) 20px(左右) 30px(下)

十一浮动

float ：left 或 right
特性：

浮动的最初设计是用来：实现文字环绕图片
- 1包裹（收缩，隔绝），释放原空间
- 2.破坏：子元素浮动会上父元素高度塌陷
  
  不是 bug ，是一种标准
清除浮动

方式特别多：
- 不用：在尾添加一个块级元素，加入clear：both
- 用：给父元素加入伪类 after 样式
  
  父元素：after{
  
  content = “”;
  
  clear = both;
  
  display = block;
  
  }

双飞翼布局

左中右占满屏幕；左右宽度是200 ，中间自适应；先加载中间

<head>
  
	<style>
	.contents>div{
            height: 20px;
            float: left;
        }
        .right{
            width: 200px;
            background: red;
            margin-left: -200px;
        }
        .left{
            width:200px;
            background: lawngreen;
            margin-left: -100%;
        }
        .main{
            width: 100%;
            background: yellow;
        }
        .middle{
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="contents">
        <div class="main">
            <div class="middle">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>   
  </body>

十二.overflow

当内容溢出时的表现
- 1值
  - hidden（溢出隐藏）
  - scroll[-x|-y] (显示滚动条)
- BFC
  
  可以用来清除浮动（实际不会那么用）
  
  为什么可以清除浮动？
  - 什么是BFC
    
    块级格式化上下文
  - BFC的原则
    
    如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外部元素（例如子元素浮动父元素高度塌陷问题）
  - 如何触发BFC
    
    html根元素
    
    float 不是 none
    
    overflow 的值是： auto ，scroll，hidden，
    
    display的值是：table-cell
    
    position的值不是：relative 和 static
十三.定位
- 相对定位
  
  position：relative
  - 值
    - left，right，top,buttom
    - 正数，负数，%
    - 注意：left ，right，top ，buttom 同时出现
      
      left 干掉 right ，top 干掉 buttom
  - 定位标准：相对原来位置进行定位
  - 保留原来的位置，不是释放空间
- 绝对定位
  
  position:absolute
  - 值，left right top button 同时出现，则是拉伸的效果
```
        /*可以用来设置背景色，但没有这么玩的*/
div{
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            top: 0;
            background:red;
        }
```
  - 定位标准：找到第一个非static的的祖先元素进行定位，如果没有则针对浏览器进行定位
  - 脱离文档流，释放原空间
  经常配合relative使用
  
  单独使用，无依赖：位置跟踪
```
<head>
			i{
            position: absolute;
            margin: -12px 0 0 0;
        }
    </style>
</head>
<body>
    <div>
        消息fasfdas
        <i>1</i>
    </div>
<body/>
```
- 固定定位
  
  position:fixed
  - 值：left ，right，top ，buttom 同时出现*
    
    left 干掉 right ，top 干掉 buttom
  - 定位标准：针对浏览器进行定位
  - 脱离文档流，释放原空间
- 层级关系：z-index ==> position
  
  z-index 数值越大，越在上面
十四 .其他
- outline ：绘制元素周围的一条线（去除 outline: none）
- border-radius：边框圆角（像素，%）
十五 . css企业开发规范
- 布局容器（全局）：以 g 为命名空间。例如：（大盒子）
  
  .g-wrap 、.g-header 、 .g-content 、 .g-container
- 工具: 以 u 为命名空间，表示不耦合业务逻辑的、可服用的工具。
  
  .u-clearfix .u-ellipsis
- 为选择器添加状态前缀
  
  有时候可以给选择器添加一个表示状态的前缀，增强语义化
  
  添加 .is- 前缀
- 书写顺序
  
  盒子类型（定位浮动）
  
  位置
  
  大小
  
  文字
  
  背景
- 中横线：单词之间使用 - 进行连接
- 不要随意使用id（初级阶段配以 js 才会使用 id）
十六

html 判段IE半杯

非 IE :
< !–[if !IE]> 除了IE 外都会执行 <!fi[endif]>
< !–[if lt IE 6]> IE 6以下 <!fi[endif]>
!: 不等于
lte: 小于等于
lt: 小于
gte: 大于等于
gt: 大于

        ...在两者之间写正常的html 代码...

禁止的js脚本要执行的代码

归去来兮★

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端之CSS

Web前端之CSS一.CSS简介是什么层叠样式表（英文全称：Cascading Stylt Sheets）可以干什么简单来说就是修饰网页怎么用(引入方式)行内样式<div style = "background:red;"> 123</div>嵌入式<head> <title></title> <style type = "text/css"> div{ b
复制链接

扫一扫

专栏目录