<!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. git分布式版本控制系统权威指南学习笔记（二）：git add暂存区的三个状态以及暂存区的理解

    文章目录 不经过git add(到暂存区),能直接进行commit吗? 举个

  2. 安卓apk反编译、修改、重新打包、签名全过程

    首先明确,反编译别人apk是一件不厚道的事情.代码是程序员辛苦工作的成果,想通过这种手段不劳而获,是不对的.这也说明,代码混淆是非常重要的.本文抱着学习的态度,研究在一些特殊的情况下如果有需要,该怎么 ...

  3. mariadb入门

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此社区采用分支的方 ...

  4. 关于Ms Sql server 表列等是否存在

    select object_id('名称') ,object_id('名称','类型') 1. 等价于 select * from sys.objects where name ='名称' selec ...

  5. 无法CREATE UNIQUE INDEX;找到重复的关键字

  6. spring_入门配置和注入

    Spring的获取容器: public static void main(String[] args) { //获取核心容器 BeanFactory延迟加载对象 ApplicationContext ...

  7. 启动eclipse出现JVM terminated. Exit code=127 错误解决办法

    https://blog.csdn.net/wpzsidis/article/details/72954387 进去第二次又错

  8. 微信小程序-云开发

    云开发 初始化 wx.cloud.init({ env: 'test-x1dzi' }) 云数据库 数据类型 String,Number,Boolean,Array,Object,Date,GeoPo ...

  9. 一起看下Apache1.3.22版本改进和修正了啥？

    Apache 1.3.20 - 1.3.22主要改进: 安全弱点: 1.在Apache1.3.20的win32平台上发现了一个漏洞.如果客户端发送一个非常长的URI可能导致用目录列表来代替缺省主页.4 ...

  10. MySQL主从复制&读写分离&分库分表

    MySQL主从复制 MySQL的主从复制只能保证主机对外提供服务,从机是不提供服务的,只是在后台为主机进行备份数据 首先我们说说主从复制的原理,这个是必须要理解的玩意儿: 理解: MySQL之间的数据 ...