<!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. java-Eclipse中使用JDBC连接数据库及相关操作

    准备工作:mysql-connector-java-5.1.6-bin.jar配置 package com.job; import java.sql.Connection; import java.s ...

  2. PHP面试 PHP基础知识 九（面向对象）

    面向对象 PHP的类权限控制修饰符 public(公共的) . protected(受保护的).private(私有的) public :最高权限   可以在类的内部使用  可以在类的外部使用  可以 ...

  3. 9. Python函数

    函数 函数能提高应用的模块性,和代码的重复利用率.定义一个函数比较简单,但是需要遵循以下几点规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 任何传入参数和自变量必须放在圆 ...

  4. 在Linux下面无法使用向上箭头自动补全上条命令

    会用^[[A替代. 参考:http://stackoverflow.com/a/8641302/941650

  5. 第九篇 数据表设计和保存item到json文件

    上节说到Pipeline会拦截item,根据设置的优先级,item会依次经过这些Pipeline,所以可以通过Pipeline来保存文件到json.数据库等等. 下面是自定义json #存储item到 ...

  6. Sql Server的内存策略

    最近碰到有人问我在使用sql server的时候,内存突然升高,但是没有log日志进行详细的调查,有没有什么解决办法. 在此我经过一番查询,发现了2种能够对内存进行一定优化限制的方法. 在数据库上点击 ...

  7. 常用Linux日志文件功能

    /var/log目录下的20个Linux日志文件功能详解 :   如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日 ...

  8. Servlet - request对象相关

    request对象中封装了当前请求的所有请求信息, request对象由Tomcat服务器创建, 并作为实参传递给处理请求的Servlet的service()方法 1. 获取请求头数据 // 获取请求 ...

  9. 【安装】Mac rabbitMQ

    安装 brew install rabbitmq 目录  cd /usr/local/Cellar/rabbitmq/3.7.4/sbin 插件 sudo ./rabbitmq-plugins ena ...

  10. 欧拉函数+反演——2019hdu多校6588

    \[ 求\sum_{i=1}^{n}(\sqrt[3]i,i)\\ 首先转化一下这个式子,考虑对于i\in[j^3,(j+1)^3-1],\sqrt[3]i=j\\ 所以可以枚举所有j,然后对i\in ...