<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="文件位置"></head><body>

</body></html><!--CSS:页面美化和布局控制1.概念：Cascading Style sheets 层叠样式表    层叠：多个样式可以作用在同一个html的元素上，同时生效2.好处：    1.功能强大    2.将内容展示和样式控制分离        降低耦合度，解耦        让分工协作更容易        提高开发效率3.CSS使用：CSS与html结合方式    1.内联样式        在标签内使用style属性指定css代码        如：<div style="color:red">hello css</div>    2.内部样式        在head标签内定义style标签，style标签的标签体内容就是css代码        如：<head>                <meta charset="UTF-8">                <title>Title</title>                <style>                    div{                        color:blue;                    }                </style>            </head>    3.外部样式        1.定义css资源文件。后缀css            div{                color:green            }        2.在head标签内，定义link标签，引入外部的资源文件            <link rel="stylesheet" href="文件位置">            <style>                @import "css文件"            </style>4.css语法：    1.格式：        选择器:{            属性名1:属性值1;            属性名2:属性值2;        }    选择器：筛选具有相似特征的元素    注意：        每一对属性需要使用;隔开，最后一对属性可以不加;5.选择器：筛选具有相似特征的元素    分类：        1.基础选择器：            1.id选择器：选择器具体的id属性值的元素，建议在一个html页面中id值唯一                #id属性值{}            2.元素选择器：选择具有相同标签名称的元素                标签名称{}                注意：id选择器优先级高于元素选择器            3.类选择器：选择具有相同class属性值的元素                .class属性值{}                <p class="cls1"> 内容 </p>        2.扩展选择器            1.选择所有元素：                *{}            2.并集选择器：                选择器1,选择器2{}            3.子选择器：筛选选择器1元素下的选择器2                选择器1 选择器2{}            4.父选择器：筛选选择器2的父元素选择器1                选择器1>选择器2{}            5.属性选择器：选择元素名称，属性名=属性值的元素                元素名称[属性名="属性值"]{}                input[a="a"]{}            6.伪类选择器：选择一些元素具有的状态                元素:状态{}                如：<a>:                        link：初始化状态                        visited：被访问过的状态                        active：正在访问状态                        hover：鼠标悬浮状态                    a:状态{                        color：颜色                    }6.属性：    1.字体、文本        font-size：字体大小        color：文本颜色        text-align：对齐方式        line-height：行高    2.背景：        background：复合属性        写法：background: url("路径") no-repeat 不重复 center 居中;    3.边框：        border：设置边框，复合属性        border：1px：个像素 solid red：框红色 border-radius: px 圆角        div水平居中：margin:auto

    4.尺寸：        width：宽度        height：高度    5.盒子模型：控制布局        margin：外边距        padding：内边距            默认情况下内边距会影响盒子大小            设置盒子的属性让width和height就是最终的盒子大小，box-sizing：border-box        float：浮动            left:左浮动            right：右浮动            center：居中    6.补充：图片居中：vertical-align ：        middle：垂直居中

-->

HTML_CSS使用的更多相关文章

  1. HTML_css样式表 样式属性 格式布局

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  2. HTML_CSS笔记

    常用标记 水平标记:<hr/> 换行标记:<br/> 段落标记:<p></p> 标题标记:<h1></h1>~~<h6&g ...

  3. HTML_css选择器

    第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式 CSS选择器分为六种: 1.id选择器 2.class选择器   3.标签选择器   4. ...

  4. HTML_CSS入门学习

    1 HTML 简介 下面解释什么是HTML,以及HTML标签和HTML文档的含义. 1.1 什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Te ...

  5. Atitit.html css  浏览器原理理论概论导论attilax总结

    Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...

  6. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  7. 数往知来 HTML<十一>

    HTML_CSS <!--一.表单   <form></form>    表单就是用来进行数据提交的标签 表单就是一对<form></form>标 ...

  8. [原创] CSS总结！！ 有关HTML第二篇 ！！

    同样是拿xMind写的   明天上传 CSS+DIV 总结   今天只有CSS了 但是首先涉及一下浏览器原理:  还有好多不知道的模块 但是页面的核心模块就这些了:(些许 需要补充 请关照   ) / ...

  9. paip.自适应网页设计 同 响应 与设计的原理的差and实践总结

    paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

随机推荐

  1. Mysql数据库命令行输入错误怎么办

    Mysql数据库命令行输入错误 缺少另一半 错误输入 ' 或 " 时,必须键入另一半才能退出命令. 缺少分号 写入语句缺少分号需要补全. 输入quit或者exit退出 ctrl+c,完全退出 ...

  2. HTML a标签文字颜色

    1.css代码: a{color:#00F} a:hover{color:#f00}/* 鼠标经过悬停字体颜色 */ /* css 注释说明:以上代码为设置HTML中超链接统一字体颜色 */ .div ...

  3. 拾遗：govendor（Golang 依赖库版本控制）

    官方资料: https://github.com/kardianos/govendor https://github.com/kardianos/govendor/blob/master/doc/fa ...

  4. 拾遗：Qemu/KVM

    WinXP: #!/bin/bash name=winxp qemu-system-x86_64 \ -enable-kvm \ -cpu host -smp ,sockets=,cores=,thr ...

  5. cesium中divPoint展示数据

    cesium中divPoint展示数据 在用点击面获取位置信息的时候,会弹出一个divPoint框,用来展示这个面的属性信息:或者位置信息. 代码如下: var handlerClick = new ...

  6. Spring Boot多数据库配置

    #datasourcespring.datasource.url=jdbc:mysql://120.26.246.185:3306/gaea?&useSSL=falsespring.datas ...

  7. linux模范配置文件格式

    模范配置文件 #--------------------------------------------------------------------- # Global settings #--- ...

  8. Jmeter+ant

    1.下载 ant,解压到非中文目录,并配置环境变量,不会的自行 google 2.将 jmeter 中 extras 子目录里的 ant-jmeter-1.1.1.jar 复制到 ant 中的 lib ...

  9. C语言static和局部变量

    #include <stdio.h> void test(); int main() { /************************************************ ...

  10. Storm框架设计