侧边栏壁纸
博主头像
LYMTICS

海纳百川,有容乃大

  • 累计撰写 45 篇文章
  • 累计创建 37 个标签
  • 累计收到 19 条评论

目 录CONTENT

文章目录

CSS入门

LYMTICS
2021-06-12 / 0 评论 / 0 点赞 / 33 阅读 / 6,815 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-12,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

CSS入门

CSS基础样式布局效果

这篇文章是大一的时候学HTML时写的,存档以为纪念

CSS基础

CSS添加方法

  • 内嵌样式, 行内添加

    <!DOCTYPE HTML>
    <html>
        <head>
            <style type = "text/css">
                h1{
                    color:red;		/*这是添加注释的一种方法--内嵌样式*/
                }
            </style>
        </head>
    <body>
            <p style = "color:red;">这是添加CSS的一种方法 -- 行内添加</p>
        </body>
    </html>
    
  • 外部样式表

    <link rel="stylesheet" type = "text/css" href="css/style.css" />
    

优先级

就近原则: 行内样式>内嵌样式>链接样式>浏览器默认样式

CSS样式

CSS选择器

/*类型一: 标签*/
p{
    font-size:12px;
}

/*类型二: 类别*/
.one{
    color:red;		/*html文件中应有: class = "one"*/
}

/*类型三: id*/
#left{
    font-weight:bold;	/*html文件中应有: id = "left" */
}

/*类型四: 嵌套*/
p span{
    font-size:12px;
}

/*类型五: 集体*/
p,h1{
    color:red;
}

/*类型六: 全局*/
*{
    text-alligin:center;
}
  • 多个选择器混用, 用空格分开
  • id可以和class混用, 但是id选择器不可以多个同时使用.

单位

单位 描述
px 像素
em 字符
% 百分比, 自动继承父类

颜色

颜色 描述
颜色字符串 red, green
RGB(0-255或百分比值) (100%, 0,0) (244, 24, 42)
rgba a值: 透明度(0.0完全透明–1.0完全不透明)
#rrggbb 十六进制数

文本样式

属性 描述 取值
color 文本颜色
letter-spacing 字符间距 2px, -3px
line-height 行高 14px, 1.5em, 150%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-through
text-indent 首行缩进 2em

字体样式

属性 描述 示例
font 在一个声明中设置所有的字体属性 font:bold, 18px, ‘幼圆’
font-family 字体系列 网页安全字体
font-size 字号
font-style 斜体
font-weight 粗体

font的顺序: 斜体 粗体 字号/行号 字体;

背景

p{
    background-color:red;
    background-image:url("logo.jpg");
    background-repeat:repeat;	/*默认填充*/
    background: red url("logo.jpg")
}

backgroud-repeat: repeat repeat-x repeat-y no-repeat

超链接

类型 描述
a 所有
a:link
a:visited
a:hover
a:active

以上就是一般顺序

a:link{
    text-decoration:none;
}

列表

无序列表ul和有序列表ol共用样式

属性 描述
list-style 所有用于列表属性的设置于一个声明中
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
  • list-style-type:
描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
  • list-style-position:

    描述
    inside
    outside

表格

描述
width 宽度
height 高度
border 边框:1px solid #eee;
border-collapse 合并

奇偶选择器

tr:nth-child(odd/even)

odd: 偶数

even: 奇数

CSS布局

盒子模型

content 内容

属性 描述
height 高度
width 宽度
border 边框
padding 内边距
margin 外边距
8#one{
    margin:1px;		/*上下左右都是1px*/
    margin:1px 2px 3px 4px;	/*上下左右*/
    margin:1px 2px;	/*等效:1px 2px 1px 2px*/
    margin-left:1px;
    margin: 0 auto;/*水平居中*/
}
/*margin的合并: 垂直方向上谁多是谁*/
/*div默认会换行*/

属性

属性 描述
hidden 超出部分不可见
scroll 超出部分以滚动条
auto 自动显示

border属性

属性 描述
border-width px,thin,medium,thick
border-style dashed,dotted,solid,double
border-color 颜色
border width style color
  • 可以用来做水平分割线

CSS定位机制

文档流flow, 浮动float, 层layer

flow

元素分类: block, inline, inline-block

元素类型转换: display属性

元素 特点 常见类型
block 1.独占一行
2.元素的height, width, margin, padding都可以设置

      inline 1.不单独占用一行
      2.width, height不可设置
      3.width就是他包含文字或图片的宽度,不可改变
      4.默认有间隙
      inline-block 1.不单独占用一行
      2.元素的height, width, margin, padding都可以设置
      a{
          display:none;	/*元素不被显示出来*/
          display:block;
          display:inline;
          display:inline-block;
      }
      

      float

      float:left, right ,none;

      div{
          float:left/right/none;
          clear:left/right/both;
      }
      
      

      layer

      position 解释
      static(default) 没有定位,属性无效
      fixed: 固定定位 相对于浏览器窗口定位
      relative: 相对定位 相对父元素定位;在原文档中的位置依然存在
      absolute: 绝对定位 相对于static定位外的第一个父元素定位
      fix-box{
          position:fixed/relative/absolute;
          left:100px;
          right:50px;
          top:100px;
          bottom:200px;
          z-index:1;	/*显示顺序*/
      }
      

      CSS3效果

      浏览器支持

      加前缀

      浏览器内涵 浏览器 CSS3前缀
      Webkit Safari, Chrome -webkit-
      Gecko Firefox -moz-
      Presto Opera -o-
      Trident IE -ms-

      border-radius

      div{
          border-top-left-radius:10px 10px;
          border-top-right:10px;
          border-radius:25px;
      }
      

      box-shadow

      p{
          box-shadow:inset 10px 10px 5px #888;
      }
      

      inset\outset(默认)

      偏移横, 偏移竖, 模糊, 颜色

      text-shadow

      水平偏移, 垂直偏移, 阴影大小, 颜色

      h1{
          text-shadow: 0 0 3px #F00; /*描边效果*/
          
          text-shadow: 2px 2px 4px #000; /*浮雕的效果*/
      }
      

      word-wrap

      p{
          word-wrap: break-word;
          word-word: normal;
      }
      

      @font-face 规则

      不同浏览器支持字体的格式不同

      @font-face{
          font-family: haha;
          src:url('fonts/hahaha.ttf')
              url('fonts/hahaha.svg')
      }
      
      p{
          font-family:haha;
      }
      

      2D转换

      对元素进行旋转, 缩放, 移动, 拉伸

      p{
          transform:rotate(30deg);	/*旋转*/
          transform:scale(1,2);		/*缩放,表示倍数*/
      }
      

      过度

      /*过渡: 将元素的某个属性从一个值在指定的时间内过渡到另一个值*/
      p{
          transation: 属性名 持续时间 过度方法;
          transition-property: 属性名|all ;
          transition-duration: 持续时间(s);
          transition-timing-function: 过渡使用的方法(函数);
      }
      

      transition-timing-function取值

      描述
      linear 匀速
      ease 慢快慢
      ease-in 慢快
      ease-out 快慢
      ease-in-out 慢快慢

      动画

      1. 定义动画 @keyframes
      2. 调用动画
      @keyframes mycolor
      {
          0% {background-color:red;}
          30% {background-color:blue;}
          60%	{background-color:yellow;}
          100% {background-color:green;}
      }
      
      div:hover
      {
          animation: mycolor 5s linear;
      }
      

      animation属性取值

      描述
      animation 简写
      animation-name
      animation-duration
      animation-timing-function 默认是"ease"
      animation-play-state running|paused

      3D变换

      #stage{
          perspective:100px;
          width:100px;
          height:100px;
      }
      
      .box{
          width:20px;
          height:20px;
          float:left;
          transition: linear 1s;
          transform-style: preserve-3d;
          transform: rotateY(60deg);
      }
      

0

评论区