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

随机推荐

Elasticsearch删除数据操作，你必须知道的一些坑
前两天有同事打电话问我,说ES删除数据有没有什么坑? 我当时就问,是删索引还是删索引里的数据?她回答说是删数据,我说查出这些数据直接删除就好了,没有什么坑... 后来想想,关于ES数据的删除,之前确实 ...
Flutter 页面下拉刷新和上拉加载
flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...
selenium3 web自动化测试框架五：数据驱动简介及基础使用
1.数据驱动概述相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为完全分离,这样的测试脚本设计模式称为数据驱动.简单的理解为数据的改变从而驱动自动化测试的执行,最终引起测试结果的改变.通过使 ...
CG标准函数
canvas入门级基本用法实现雨滴下落特效
canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
mysql中单个字段包含','转换成多条记录
问题:把value中的值取出作为另外一个表的where条件时,必须把value中的用','分隔的每一个id截取出来解决方法: ),) ) #本文参考自网络某文章,非原创
IDEA debug漏洞第二弹(fastjson，version<1.2.47)
首先这个漏洞调试不需要非要使用docker,本身是一个jar包的问题.所以我们可以自己写一个小java代码来直接调试. POC如下 {"name":{"@type&quo ...
3rd.botan
1.HOME 1.官网:https://botan.randombit.net/ Win下编译步骤:https://botan.randombit.net/handbook/building.htm ...
tabs 导航及内容切换
 <div class="col-md-6" style="padding: 0px"> <ul id=& ...
Pycharm 误删文件夹
在Linux下操作时误删除了Pycharm项目中的文件夹,打开垃圾桶,居然找不到,立马上网查Linux下怎么恢复文件, 冷静一下,不是还有个Ctrl + Z吗,对着Pycharm 文件浏览器按一下, ...

web开发：css基础

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

随机推荐

热门专题