码迷,mamicode.com
首页 > Web开发 > 详细

学习CSS

时间:2018-08-02 02:01:10      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:visit   文本   aci   提升   名称   进制   文本格式   边框   upload   

CSS教程

菜鸟教程
通过使用CSS我们可以大大提升网页开发的工作效率

什么是CSS?

  • CSS指层叠样式表(Cascading Style Sheets)
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 把样式添加到HTML中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一

CSS语法

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明

技术分享图片

CSS Id和Class

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义.

#para{
    text-align: center;
    color: red;
}

class选择器以一个点"."号显示:

.center{
    text-align: center;
}

CSS创建

插入样式表的方法有三种

  • 外部样式表
  • 内部样式表
  • 内联样式表

外部样式表

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

内部样式表

<head>
    <style>
        hr {
            color: red;
        }
        p {
            margin-left: 20px;
        }
    </style>
</head>

内联样式

<p style="color: red;">这是一个段落</p>

CSS背景

CSS属性定义背景效果

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

body {
    background-color: #33eeee;
}

颜色值定义:

  • 十六进制 如: "#eeeeee"
  • RGB 如: "rgb(244, 0, 0)"
  • 颜色名称 如: "red"

    背景图像

body {
    background-image: url("paper.gif");
}

水平或垂直平铺

body{
    backgrond-image: url("pag.jpg");
    backgrond-repeat: repeat-x;
}

设置定位与不平铺

body{
    background-image: url("img.jpg");
    background-repeat: no-repeat;
}

可以利用background-position属性改变图像在背景中的位置

body{
    background-image: url("img.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}

简写属性

body{
    background: #ffffff url("img.jpg") no-repeat right top;
}

顺序为:

  • background-color 背景颜色
  • background-image 背景图像
  • background-repeat 背景如何重复
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
  • background-position 设置图像的起始位置

CSS文本格式

属性 描述
color 设置文本颜色
direction 文本方向
letter-spacing 字符间距
line-height 行高
text-align 对齐元素中的文本
text-desoration 文本添加修饰
text-indent 缩进文本的首行
text-shadow 文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置子间距

CSS字体

属性 描述
font 在一个声明中设置所有的字体属性
font-famail 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font=variant 让小型大写字体或正常字体显示文本
font-weight 指定字体的粗细

CSS链接

  • a:link 正常,未访问过的链接
  • a:visited 用户已访问过的链接
  • a:hover 当用户鼠标放在链接上时
  • a:active 链接被点击的那一刻

CSS盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
技术分享图片
不同部分的说明:

  • margin(外边距) 清除边框外的区域,外边距是透明的.
  • border(边框) 围绕在内边距和内容外的边框
  • padding(内边距) 清除内容周围的区域,内边距是透明的.
  • content(内容) 盒子的内容,显示文本和图像

学习CSS

标签:visit   文本   aci   提升   名称   进制   文本格式   边框   upload   

原文地址:https://www.cnblogs.com/zzr-stdio/p/9404563.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!