web开发：css基础

一、w3c架构分析

二、css三种引入

三、三种引入的优先级

四、基础选择器

五、长度单位与颜色

六、文件样式操作

七、display

一、w3c架构分析

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>架构分析</title>

</head>

<body>

    <!-- 页面整体架构 -->

    <div class="wraper">

        <div class="header"></div>

        <div class="nav"></div>

        <div class="mian">

            <div class="left"></div>

            <div class="center"></div>

            <div class="right"></div>

        </div>

        <div class="footer"></div>

    </div>

    <!-- box架构 -->

    <!-- .box>(h2+p*2+h3) -->

    <div class="box">

        <h2>领先的 Web 技术教程 - 全部免费</h2>

        <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>

        <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>

        <h3>从左侧的菜单选择你需要的教程！</h3>

    </div>

    <!-- .img-box架构 -->

    <div class="img-box">

        <img src="" alt="">

        <div class="text">

            <h2></h2>

            <p></p>

            <p></p>

        </div>

    </div>

</body>

</html>

二、css三种引入

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>css三种引入</title>

    <!-- 内联式 -->

    <style type="text/css">

        /* css注释 */

        /*选择器 p | 作用域 {} | 样式块*/

        p {

            width: 150px;

            height: 150px;

            background-color: red;

        }

    </style>

    <!-- 外联式 -->

    <!-- 要将css文件与该html文件建立联系 => link -->

    <!-- 相对路径(目标文件相对于本文件的位置 ./当前路径 ../上一层路径) | 绝对路径 -->

    <link rel="stylesheet" href="./02.css">

</head>

<body>

    <!-- css: 层级样式表, 完成页面布局 -->

    <!-- 组成部分: 选择器 作用域 样式块 -->

    <!-- 1.行间式 -->

    <div style="color: red">一段话, 将要被css修饰处理</div>

    <!--

    1. 样式书写在标签的style全局属性中

    2. 样式格式为 => key: value(单位)

    3. 以;隔开多个样式

    4. 最后的;可以省略

     -->

    <!-- 宽高背景颜色 -->

    <div style="width: 200px; height: 200px; background-color: orange"></div>

    <!-- 2. 内联式 -->

    <!--

    1. 样式书写在head标签内的style标签中

    2. 样式格式为 => 选择器 { 样式块 }

    3. 样式块 => key: value(单位)

    4. 以;隔开多个样式

    5. 最后的;可以省略

     -->

    <p></p>

    <p></p>

    <!-- 3.外连式 -->

    <!--

    1. 样式书写在外部css文件中,不需要写任何标签

    2. 样式格式为 => 选择器 { 样式块 }

    3. 样式块 => key: value(单位)

    4. 以;隔开多个样式

    5. 最后的;可以省略

     -->

    <h3></h3>

</body>

</html>

三、三种引入的优先级

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>三种引入的优先级</title>

    <!-- 三种可以同时存在,协同完成布局 -->

    <!-- 三种之间没有优先级之说,谁在逻辑下方(后解释的)谁就起作用(样式覆盖机制) -->

    <!-- 行间式一定是逻辑最下方的 -->

    <!-- 外联 -->

    <link rel="stylesheet" href="./03.css">

    <!-- 内联 -->

    <style type="text/css">

        div {

            width: 200px;

            color: pink;

        }

    </style>

</head>

<body>

    <!-- 优先级: 大家同时存在且操作同一对象同一属性,才会出现冲突,最终起作用的就是优先级高的 -->

    <!-- 行间 -->

    <div style="background-color: cyan; color: orange">你是个好人</div>

</body>

</html>

四、基础选择器

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基础选择器</title>

    <style type="text/css">

        /*div => 标签名 => 标签选择器: 开发过程中尽可能少的运用,运用范围为最内层的显示层*/

        /*dd => class名 => 类选择器: 布局的主力军*/

        /*d => id名 => id选择器: 一定为唯一的*/

        /* * => 通配选择器 => html,body,body下所有用于显示内容的标签 */

        /** {

            border: 1px solid black;

        }*/

        /*三种选择器有优先级*/

        /*标签选择器: 标签名{} */

        div {

            width: 200px;

            height: 200px;

            background-color: red;

        }

        /*类选择器: .类名{} */

        .dd {

            background-color: orange;

        }

        /*id选择器: #id名{}*/

        #d {

            background-color: green;

        }

        /*优先级: id选择器 > 类选择器 > 标签选择器 > 通配选择器*/

        /*作用范围越精确,优先级越高*/

    </style>

    <style type="text/css">

        .div {

            width: 100px;

            height: 100px;

            background-color: orange

        }

        /*多类名: 类名与类名之间不能用于任何符号隔断*/

        .red.div {

            background-color: red;

        }

    </style>

</head>

<body>

    <!-- ***** -->

    <!-- 选择器: css选择html标签的一个工具 => 将css与html建立起联系,那么css就可以控制html样式 -->

    <!-- 选择器其实就是给html标签起名字 -->

    <div></div>

    <div class="dd"></div>

    <div class="dd" id="d"></div>

    <div class="div"></div>

    <div class="div red r"></div>

    <div class="div"></div>

</body>

</html>

五、长度单位与颜色

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>长度与颜色</title>

    <style type="text/css">

        .div {

            /*px mm cm in em vw vh*/

            width: 200px;

            height: 200px;

            /*颜色单词 | rgb() 0~255 | rgba() | #六位十六进制数*/

            /*background-color: orange;*/

            /*background-color: rgb(255, 0, 255);*/

            /*background-color: rgba(255, 0, 255, 0.5);*/

            /*#abc == #AABBCC*/

            background-color: #ff0;

        }

    </style>

</head>

<body>

    <div class="div"></div>

</body>

</html>

六、文件样式操作

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>文本样式操作</title>

    <style type="text/css">

        .box {

            width: 200px;

            height: 200px;

            background-color: orange;

        }

        /*字体样式*/

        .box {

            width: 400px;

            /*字族*/

            /*STSong作为首选字体, 微软雅黑作为备用字体*/

            font-family: "STSong", "微软雅黑";

        }

        .box.uu {

            /*字体大小*/

            font-size: 40px;

            /*字重*/

            font-weight: 900;

            /*风格*/

            font-style: italic;

            /*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/

            line-height: 200px;

            /*字体整体设置*/

            /*字重 风格 大小/行高 字族  (风格可以省略)*/

            font: 100 normal 60px/200px "STSong", "微软雅黑";

        }

        i {

            /*normal清除系统字体风格*/

            font-style: normal;

        }

    </style>

    <style type="text/css">

        .wrap {

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

        /*文本样式*/

        .w1 {

            /*换行方式*/

            word-break: break-all;

        }

        .w2 {

            width: 400px;

            /*水平居中: left | center | right*/

            /*text-align: center;*/

            /*字划线: overline | line-through | underline  */

            text-decoration: overline;

            /*字间距*/

            letter-spacing: 2px;

            /*词间距*/

            word-spacing: 5px;

            /*缩进*/

            /*1em相当于一个字的宽度*/

            text-indent: 2em;

        }

        a {

            /*取消划线*/

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div class="box uu">普通文本</div>

    <i>i的文本</i>

    <div class="wrap">一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div>

    <hr>

    <div class="wrap w1">123 12312 312312312312312312312312 3123123123123123123123123123123123123123123123123123123</div>

    <hr>

    <div class="wrap w2">hello world hello world</div>

    <a href="">链接标签</a>

</body>

</html>

七、display

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>display</title>

    <style>

        .box {

            width: 80px;

            height: 40px;

            background-color: orange

        }

        .box {

            /*block: 块级标签, 独占一行, 支持所有css样式*/

            /*display: block;*/

            /*inline: 内联(行级)标签, 同行显示, 不支持宽高*/

            /*display: inline;*/

            /*inline-block: 内联块标签, 同行显示, 支持所有css样式*/

            display: inline-block;

            /*标签的嵌套规则*/

            /*①*/

            /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/

            /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/

            /*②*/

            /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */

            /*③*/

            /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/

        }

        .b1 {

            height: 100px;

        }

        .b2 {

            height: 80px;

        }

        .b3 {

            height: 120px;

        }

        .box {

            /*文本基线对齐*/

            vertical-align: baseline;

        }

    </style>

</head>

<body>

    <!-- <div class="box b1"></div>

    <div class="box b2"></div>

    <div class="box b3"></div> -->

    <div class="box b1">123</div>

    <div class="box b2">456</div>

    <div class="box b3">

        <span>789 789 789 789</span>

        <span>789 789 789 789</span>

    </div>

</body>

</html>

web开发：css基础的更多相关文章

Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
Web开发——HTML基础
文档资料参考: 参考:MDN官网参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...
Web开发——HTML基础（图像、音频和视频内容）
参考: 参考:HTML中的图像参考:视频和音频内容目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...
Web前端开发CSS基础
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
Web前端开发css基础样式总结
颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...
Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
Web开发——jQuery基础
参考: 参考W3School:jQuery 教程参考:jQuery 参考手册参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
Web开发——HTML基础（HTML响应式Web设计 Bootstrap）
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
Web开发——HTML基础（高级文本格式列表/style）
文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...

随机推荐

antd二级联动异步加载
/** * Created by Admin on 2016/9/19. * 批量导入 */ import React, {Component, PropTypes} from "react ...
unity3d 嵌入iOS的 In App Purchase 应用程序内购买
Unity做东西是快,但是有些功能是需要额外开发的,比如 IAP (In App Purchase,应用程序内购买) 还好unity提供了灵活的扩展功能,允许嵌入原生代码来做一些unity未实现的功能 ...
WePay-T
(需先申请微信支付商户账号) 在微信支付中绑定appid,公众号和小程序都一样微信支付中如下: 微信公众平台如下(公众号与小程序一样): 微擎配置微信支付 appid.appsecret为公众号中对 ...
django 之(二) --- 源码分析
CBV类视图继承 CBV:继承自View:注册的时候使用的as_view() 入口不能使用请求方法的名字作为参数的名字只能接受已经存在的属性对应的参数定义了一个view 创建了一个类视图对象保 ...
【计算机视觉】深度相机（五）--Kinect v2.0
原文:http://blog.csdn.NET/qq1175421841/article/details/50412994 ----微软Build2012大会:Kinect for Windows P ...
【VS开发】fopen 文本文件与二进制文件区别
在学习C语言文件操作后,我们都会知道打开文件的函数是fopen,也知道它的第二个参数是标志字符串.其中,如果字符串中出现'b',则表明是以打开二进制(binary)文件,否则是打开文本文件. 那么什 ...
centOS 安装 npm
下载 cd /usr/local/node wget https://npm.taobao.org/mirrors/node/v10.14.1/node-v10.14.1-linux-x64.tar. ...
mysql的密码规则问题
今天在设置mysql某用户的密码时,出现了此报错: ERROR 1819 (HY000) Your password does not satisfy the current policy req ...
【洛谷】P5348 密码解锁
[洛谷]P5348 密码解锁很显然我们可以推导出这个式子设\(a(m)\)为\(m\)位置的值 \[ \mu(m) = \sum_{m | d} a(d) \\ a(m) = \sum_{m|d} ...
Hello TypeScript
⒈TypeScript简介 1.JavaScript的超集 2.支持ECMAScript6标准,并支持输出ECMAScript3/5/6标准的纯JavaScript代码 3.支持ECMAScript未 ...

web开发：css基础

web开发：css基础的更多相关文章

随机推荐

热门专题