美文网首页
CSS

CSS

作者: Vsion8980 | 来源:发表于2018-10-05 21:17 被阅读0次

非原创，摘抄自网络，仅供翻阅

引入方式

  • 行内样式
    • <p style="color:red;font-size:30px;">我是p标签</p>
  • 内联样式 
    <head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>
  • 外链式
    • <link type="text/css" rel="styleSheet" href="CSS文件路径" />

CSS属性

CSS选择器

  • 类选择器
  • id选择器
  • 标签名选择器

优先级：标签名选择器<类选择器<id选择器<行间样式

  • 伪类选择器

盒模型

  • 宽/高
  • 内边距/外边距
  • 边框

文本样式

属性 注释
font-size 文字大小（一般均为偶数）
font-family 中文 SimSun (宋体) SimHei (黑体) Microsoft YaHei (微软雅黑) STKaiti (华文楷体) 英文 Arial Georgia Helvetica sans-Serif
color 文字颜色（英文、rgb、十六位进制色彩值）
line-height 行高 (具体的数值)
text-align 文本对齐方式 （left center right）
text-indent 首行缩进（em缩进字符或者是具体的数值）
font-weight 文字着重 （normal bold bolder 100~900）
font-style 文字倾斜 (normal italic oblique)
text-decoration 文本修饰 (none underline overline line-through)
letter-spacing 字母间距 (具体的数值)
word-spacing 单词间距（以空格为解析单位）
属性 复合写法
background: background-color background-image background-position background-repeat
border border-width border-style border-color
padding 上 右 下 左
margin 上 右 下 左
font： font-style    font-weight     font-size/line-height    font-family；

常用样式

属性 解释
width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距
font-size 文字大小
font-family 字体
color 文字颜色
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进
font-weight 文字着重
font-style 文字样式
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距

浮动

  • 其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。
  • 特性
    1.浮动的元素排在同一排
    2.浮动的元素内容撑开宽度
    3.浮动的元素支持所有的css样式
    4.浮动的元素脱离文档流
    5.浮动的元素提升层级半级

脱离文档流：标签浮动后，不受父级标签的控制。

例子：

浮动前：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 10px solid red;
        }
        .box>div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
    </style>
</head>
<body>


<div class="box">
    <div>我是盒子1</div>
    <div>我是盒子2</div>
    <div>我是盒子3</div>
    <div>我是盒子4</div>
    <div>我是盒子5</div>
</div>

</body>

网页效果：


浮动前效果

让子级盒子浮动：
（子级盒子css变化）：

        .box>div{
            width: 100px;
            height: 100px;
            float: left;  //浮动
            border: 10px solid red;
        }

效果：


浮动

子级盒子的浮动使得其子级div失去父级box的控制，由原来子级撑起父级的宽度/高度变得失效。

浮动的元素提升层级半级：

想要理解“浮动元素提升层级半级”，就要先知道div基础属性与div所包含的内容是相互分离的：

div侧视图
div非浮动
当div浮动时，
div浮动1
div浮动2

实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            float: left;
            border: 5px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 5px solid red;
        }
    </style>
</head>
<body>


<div class="box1">
    我是盒子1
</div>
<div class="box2">
    我是盒子2
</div>


</body>

效果图：


效果图
  • BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
    1.父级也浮动
       弊端：左右的margin:0 auto; 会失效；
    2.父级加display:inline-block
       弊端：左右的margin:0 auto; 会失效；
       (如果需要让元素居中可以给父级加text-align:center)
    3.给父级加高
       弊端：扩展性不好
    4.br标签
       写法：</br/>
       作用：换行
    5.伪类清浮动
       :after{
            content:"";display:block;clear:both;
        }

定位： 把一个元素 按照一定的方式 定到页面的某一个位置

position

  • 相对定位 relative
    针对自己本身的位置进行定位

    1.不影响元素本身的特性
    2.不使元素脱离文档流
    3.提升层级
    4.无法触发BFC
    5.针对自己本身进行定位

  • 绝对定位 absolute
    针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位
    注：
    绝对定位即使没有初始值，也一定要设置值
    left:0px;
    top:0px;

    1.会使元素完全脱离文档流
    2.内容撑开宽度和高度
    3.使元素支持所有的CSS样式
    4.提升层级
    z-index:数值; 定位层级设置
    数值越大，层级越高
    5.绝对定位要和相对定位配合使用
    6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移
    7.如果绝对定位的子级有浮动，可以省略清浮动的操作

  • 固定定位 fixed
    针对页面窗口进行定位
    注：
    IE6 不支持固定定位

    偏移量
    left
    top
    right
    bottom
    温馨提示
    left top 比 right bottom 的优先级要高

    1.不兼容IE6
    2.针对窗口进行定位
    3.如果固定定位的子级有浮动，可以省略清浮动的操作

定位常用方式：子绝父相
即父级为相对定位，子级为绝对定位。

圆角

border-radius：

  • 八个值：左上角 右上角 右下角 左下角->水平圆角半径/左上角 右上角 右下角 左下角->垂直圆角半径
  • 四个值: 左上角 右上角 右下角 左下角->圆角半径
  • 三个值: 左上角 右上角|左下角 右下角
  • 两个值: 左上角|右下角 右上角|左下角
  • 一个值：四角同半径

背景裁切

background-clip：

  • border-box 裁掉边框以外的背景部分，为默认值
  • padding-box 裁掉内边距以外的背景部分
  • content-box 裁掉内容以外的背景部分
  • text 裁掉文字轮廓以外的背景部分，目前需加webkit前缀

渐变

  • 线性渐变

    background: linear-gradient(to direction, color-start, color-stop1, ... , color-end);

    1. to direction:方向（默认由上到下），参数包括角度、方位（top，bottom，left，right）
    2. color-start：起始颜色
    3. color-stop1, ... , color-end：终止颜色
  • 径向渐变

    background: radial-gradient(size shape at position,start-color, ..., last-color);

    1. size shape at position:圆心（坐标）at center、at 100px 200px
    2. start-color：起始颜色
    3. last-color：终止颜色

盒阴影/文字阴影

box-shadow/text-shadow:[inset] h-shadow v-shadow blur spread color;

1.[inset]:默认为外阴影，inset为内阴影
2.h-shadow：阴影水平偏移量
3.v-shadow：阴影垂直偏移量
4.blur：阴影模糊半径
5.spread：阴影扩展半径
6.color：阴影颜色

蒙版

-webkit-mask

过渡

transition: property duration timing-function delay;

1.property:规定应用过渡效果的 CSS 属性的名称(none、width、height、all)
2.duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）
3.timing-function：规定过渡效果的速度曲线（linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)）

time-function 曲线
linear linear
ease ease
ease-in ease-in
ease-out ease-out
ease-in-out ease-in-out
cubic-bezier(n, n, n, n)） cubic-bezier, example

4.delay：规定过渡效果何时开始（以秒或毫秒计，允许负值）

过渡常用的触发方式：伪类触发

变换

transform:

  1. translate（位移）
  2. rotate（旋转）
  3. scale（缩放）

transform-origin：切换变换原点

3D

首先给需要3D转换的元素的父级添加3D环境和景深

transform-style:preserve-3d; //添加3d环境
perspective: XXX px; //景深
  • transform：与2d的变换不同的是3D的坐标轴为3维坐标轴即X/Y/Z轴。

相关文章

网友评论

      本文标题：CSS

      本文链接：https://www.haomeiwen.com/subject/obbqaftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！