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 ...

随机推荐

swift 第十二课 as 的使用方法
忽略的基础性的问题,应该早点写出这个问题的解释比较好,毕竟 swift 好多的地方都用到了 as as!as?,是非常容易搞晕大脑的 1,as使用场合 (1)从派生类转换为基类,向上 ...
码云配置WebHook自动更新
配置项目提交到git的时候自动同步服务器代码一.在服务器项目跟目录新建文件hook.php 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php $json = ...
Python-OpenCV实现二值图像孔洞填充
代码如下: import cv2 import numpy as np def FillHole(mask): contours, hierarchy = cv2.findContours(mask, ...
深度优先dfs与广度bfs优先搜索总结+例题
DFS(Deep First Search)深度优先搜索深度优先遍历(dfs)是对一个连通图进行遍历的算法.它的思想是从一个顶点开始,沿着一条路一直走到底,如果发现不能到达目标解,那就返回到上一个节 ...
FMZ发明者量化平台回测机制说明
原文连接:https://www.fmz.com/digest-topic/4009 大部分策略在实盘之前都需要回测进行验证,FMZ支持部分品种数字货币现货.期货和永续合约,以及商品期货所有品种.但发 ...
Velocity 数值格式化（NumberTool工具类）：保留两位小数和格式化千分位、取整
Velocity 自带的工具类:NumberTool 实现数字格式化:保留两位小数和格式化千分位,以及取整. NumberTool 的 format(String format, Object obj ...
linux中alarm函数和pause函数详解实例
alarm(time);执行之后告诉内核,让内核在time秒时间之后向该进程发送一个定时信号,然后该进程捕获该信号并处理:pause()函数使该进程暂停让出CPU,但是该函数的暂停和前面的那个slee ...
Linux 如何找到100M以上的大文件
find / -type f -size +100000k |xargs ls -lh|awk '{print $9 ":" $5}'
2019华东交通大学ACM基地简介
一.基地成就简介: ACM国际大学生程序设计竞赛(英文全称:ACM International Collegiate Programming Contest(简称ACM-ICPC或ICPC))是由国际 ...
MySQL添加、修改、撤销用户数据库操作权限的一些记录
查看MYSQL数据库中所有用户 SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user; ...

web开发：css基础

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

随机推荐

热门专题