<!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. webdriver使用已打开过的chrome

    基本功能: 执行脚本a,打开一个chrome,脚本a执行完成,chrome未关闭. 执行脚本b,继续使用a打开的chrome,不新启浏览器. 附加: 如果已打开的chrome未关闭,则在chrome中 ...

  2. JSON.toJSONString()null值转“”

    public static void main(String[] s) { CybWmsCommoditiesVo cybWmsCommoditiesVo = new CybWmsCommoditie ...

  3. （数据科学学习手札60）用Python实现WGS84、火星坐标系、百度坐标系、web墨卡托四种坐标相互转换

    一.简介 主流被使用的地理坐标系并不统一,常用的有WGS84.GCJ02(火星坐标系).BD09(百度坐标系)以及百度地图中保存矢量信息的web墨卡托,本文利用Python编写相关类以实现4种坐标系统 ...

  4. sanic+aiohttp爬虫demo(爬图片，新闻，数据)

    直接上代码,都是很简单的一些demo,爬取的网站,都没有什么加密措施,所以应该不涉及违法数据,哈哈 1.爬取网页数据(aiohttp+sanic+scrapy+xpath解析html) from sa ...

  5. 微信小程序中实现左右滑动图片翻页

    页面代码 <swiper class="container" indicator-dots="{{indicatordots}}" autoplay=&q ...

  6. 关于vsphere exsi安装时遇到的问题

    我在虚拟机上安装vsphere 6.0的时候,在安装的过程中报错,出现了如下的内容. Error loading /tools.t00 Compressed MD5: Decompressed MD5 ...

  7. UVA11427 Expect the Expected 概率dp+全概率公式

    题目传送门 题意:小明每晚都玩游戏,每一盘赢的概率都是p,如果第一盘就赢了,那么就去睡觉,第二天继续玩:否则继续玩,玩到赢的比例大于p才去睡:如果一直玩了n盘还没完成,就再也不玩了:问他玩游戏天数的期 ...

  8. 【持续更新】leetcode算法-数组篇

    会在近期陆续地完成数组篇的整理,希望对找工作的小伙伴有所帮助.   1.Two Sum:两数相加为一固定值,求其下标.一次遍历数组,用一个hash表存储已经访问过的数及其下标,对于新访问的数value ...

  9. Qt 【无法打开 xxxx头文件】

    经过多次磕碰,终于发现了通用的办法. 测试环境Qt5.5.1 mvcs 比如需要用到QtWin 直接去包含然后运行,but fail, 我去查找他的父类  QtWinExtras Qt自带的自动补全, ...

  10. 脚本启动SpringBoot（jar)

    #!/bin/sh RESOURCE_NAME=springbsit-api.jar tpid=`ps -ef|grep $RESOURCE_NAME|grep -v grep|grep -v kil ...