CSS简单使用

标签 ： 前端技术

CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能.

CSS与HTML结合

CSS与HTML结合的方式有四种:

  • style属性:

    在每个HTML标签上均有一个style属性, 将样式直接写入标签:
<div style="background-color:red;color:green;">
  • <style/>标签:

    使用HTML的<style/>标签,将CSS代码在<head/>内:
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IFS</title>
    <style type="text/css">
        div {
            background-color: coral;
            color: crimson;
        }
    </style>
</head>
  • @import引入:

    在<style/>内用@import "CSS-path";引入CSS文件:
<style type="text/css">
    @import "style.css";
</style>

注意: 这种方式的浏览器兼容性较差, 不推荐.

  • <link/>引入:

    使用头标签<link/>引入CSS是最常用的结合方式:
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IFS</title>
    <link rel="stylesheet" href="style.css">
</head>

注: 结合优先级:

根据书写顺序<由上到下,由外到内>,优先级<由低到高>,即:后加载优先级更高.

代码规范

  • 选择器名称 { 属性名：属性值；属性名：属性值；…….}

    • 属性与属性间用;隔开;
    • 属性名与值间用:连接;
    • 一个属性的多个值用空格隔开;

CSS选择器

选择器是CSS的核心,从最初的元素/class/id选择器,演进到伪元素/伪类,以及CSS3中提供的更丰富的选择器… 定位页面上的任意元素开始变得愈发简单.

基本选择器

CSS提供的基本选择器有三种:

  • 标签选择器:

    使用标签名作为选择对象:
div {
    background-color: aquamarine;
    color: coral;
}
  • class选择器:

    可为每个HTML标签添加class属性以标识该元素:
<div class="form-class">
    ...
</div>
.form-class {
    background-color: beige;
    color: crimson;
}

注: class可以选用多个style:

<p class="div-class div-width-class">百度/阿里/腾讯</p>

  • ID选择器

    可为每个HTML标签添加id属性以标识该元素:
<dl id="dl-id">
    <dt>Head</dt>
    <dd>Sub</dd>
</dl>
#dl-id {
    background-color: coral;
    color: crimson;
}

注:基本选择器优先级:

style属性 > ID选择器 > class选择器 > 标签选择器

扩展选择器

  • 关联选择器:
<div><p>关联选择器</p></div>
<p>不关联</p>

HTML代码如上, 可以仅设置<div><p>元素内的样式而忽略单<p>元素内样式:

div p{
    color: crimson;
}
  • 组合选择器:

    组合选择器可将不同的标签设置成相同的样式:
div, p {
    color: darkblue;
}
  • 伪元素选择器

    伪元素选择器是CSS中已经提供一些样式,可直接引用,如超链接状态:
原始状态 鼠标悬停 点击 点击之后
:link :hover :active :visited 
<a href="http://www.taobao.com" target="_blank">淘宝</a>
/* 初始状态 */
a:link {
    background-color: blueviolet;
}

/* 悬停 */
a:hover {
    background-color: aqua;
}

/* 点击 */
a:active {
    background-color: crimson;
}

/*点击之后*/
a:visited {
    background-color: yellowgreen;
}

注意: 伪元素选择器浏览器兼容性较差.

CSS盒子模型

Box Model:盒子模型(又叫框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border)和外边距(margin)的方式.在HTML文档中,每个元素（element）都有盒子模型,所以在Web世界中(特别是页面布局中),Box Model无处不在:



注意在进行布局前需要将数据封装到一块DIV区域内.

边框 border

border[-*] : border-width || border-style || border-color

边框 描述
border 统一设置
border-top 上
border-bottom 下
border-left 左
border-right 右 
<div class="box-div-class">
    百度/阿里/腾讯
</div>
<div class="box-div-class box-right-class">
    百度/阿里/腾讯
</div>
<style type="text/css">
    .box-div-class {
        width: 400px;
        height: 300px;
        /*盒子模型*/
        border: 5px solid brown;
    }

    .box-right-class {
        border-right: 3px dashed green;
    }
</style>

内边距 padding

padding[-*] : length

同border,使用padding可以统一设置,也可上下左右分别设置:

.box-padding-class {
    padding-left: 50px;
}

内边距padding又翻译成补白.

外边距 margin

margin[-*] : auto | length

同border,使用margin可以统一设置,也可上下左右分别设置:

.box-margin-class {
    margin-top: 50px;
}

外边距margin又翻译成边界.

CSS布局

布局漂浮

float : none | left | right

属性 作用
left 文本流向对象的右边
right 文本流向对象的左边 
.float-left-class{
    float: left;
}

注意: 布局漂浮浏览器兼容性较差,不推荐使用.

布局定位

position : static | absolute | relative

属性 说明
static 默认值,无特殊定位,对象遵循HTML定位规则
absolute 将对象从文档流中拖出: 可以使用left/right/top/bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位,如果不存在这样的父对象,则依据body对象,而其层叠通过z-index属性定义
relative 对象不可层叠(不会把对象从文档流中拖出),与absolute一样可以使用left/right/top/bottom数据进行相对定位.
  • absolute
.position-class{
    position: absolute;
    left: 50px;
    top: 50px;
}
  • relative
.position-class{
    position: relative;
    left: 50px;
    top: 50px;
}

CSS简单使用的更多相关文章

  1. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  2. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  3. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  4. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

  5. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  7. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  8. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

随机推荐

  1. spring copy中的一个很气人的问题（初学者渣渣的一些感受）

    把别人的工程直接导入使用,出现了各种bug......(细节决定成败,得到以下教训) 1.工程的第一步是检查版本和插件版本兼容问题.很重要 2.然后导入包,看依赖包是否版本太低,(前期做好这些,能让你 ...

  2. css清除浮动方法小结

    清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...

  3. 获取IE下载历史的具体实现

    背景: 博主去年在国内某知名互联网公司做URL安全检测时写的一份草稿. 最后却没用到项目上. 当时主要想用于URL网址安全的入库以及更新,需要建立下载文件以及URL的安全属性关联. 逻辑大致是这样的: ...

  4. [HNOI 2010]Bounce 弹飞绵羊

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  5. [BZOJ]1014 火星人prefix(JSOI2008)

    一边听省队dalao讲课一边做题真TM刺激. BZOJ的discuss简直就是题面plus.大样例.SuperHINT.dalao题解的结合体. Description 火星人最近研究了一种操作:求一 ...

  6. 浅谈java中内置的观察者模式与动态代理的实现

    一.关于观察者模式 1.将观察者与被观察者分离开来,当被观察者发生变化时,将通知所有观察者,观察者会根据这些变化做出对应的处理. 2.jdk里已经提供对应的Observer接口(观察者接口)与Obse ...

  7. jqGrid移动滑块时冻结首列和第二列例子

    js代码如以下代码:在initAllGrid函数colModel1加入属性设置:frozen:true:然后在_initGrid('task_con_grid_div',colModel1)函数里面加 ...

  8. 修改SQL数据库中表字段类型时，报“一个或多个对象访问此列”错误的解决方法

    在SQL数据库中使用SQL语句(格式:alter table [tablename] alter column [colname] [newDataType])修改某表的字段类型时,报一下错误:由于一 ...

  9. C++中的explicit关键字的用法

    一.explicit作用: 在C++中,explicit关键字用来修饰类的构造函数,被修饰的构造函数的类,不能发生相应的隐式类型转换,只能以显示的方式进行类型转换. 二.explicit使用注意事项: ...

  10. Cisco Port-Channel 设置(链路聚合)

    Port-Channel 的在实际工作中的主要作用是将两个或多个端口捆绑成为一个虚拟通道. interface Port-channel1 description port(1/0/5-6) swit ...