<!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. CSS：CSS Display(显示) 与 Visibility（可见性）

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  2. 12、testng.xml指定运行测试包、测试类、测试方法

    目录如下: TestFixture.java 代码如下: package com.testng.cn; import org.testng.annotations.*; public class Te ...

  3. Codeforces 1172A Nauuo and Cards

    题目链接:http://codeforces.com/problemset/problem/1172/A 题意:一共有2*n张牌,n张0,n张1到n.现在随机的n张(有0有数字)在手上,另n张再牌堆中 ...

  4. 40-Ubuntu-用户管理-05-which查看命令所在位置

    which 查看执行命令所在的位置 例: 1.查看修改用户密码的命令--passwd所在位置 which passwd 注: /etc/passwd 是用于保存用户信息的文本文件. /usr/bin/ ...

  5. Kettle 中的循环

    说道循环,小伙伴们肯定不陌生,就是重复干一件事:而kettle中的循环一般是发生在job中,因为job是串行执行的: kettle的循环有两种,一种是通过js脚本,另外一种是通过遍历前面步骤返回的每一 ...

  6. CSS标准的书写顺序

  7. Shell 编程综合案例

    Shell编程综合案例 Shell也学习了大概的知识,现在这篇文章就大概讲述下如何使用shell编写一个脚本呢?下面就展示一个大家常用的数据库备份案例来进行展示. 需求分析 1)每天凌晨2:10分备份 ...

  8. linux redis安装及JAVA使用jedis

    一.redis安装 1.安装redis 将redis安装包放到指定目录下.并用tar -zxvf redis.*****.tar.gz解压2.想把redis安装到哪里,就在哪里创建redis文件夹. ...

  9. Windows server 2016 / Windows 10关于域管理员帐号权限不足的问题

    今天在测试windows server 2016的域创建时,当安装结束之后,发现使用Administrator用户进行操作时,被提示了权限不足这个问题.于是我在百度上查找了一番之后,找到了解决方法. ...

  10. systemctl命令的使用及服务状态的查看

    二.systemctl命令 systemctl list-units            ##列出当前系统服务的状态 systemctl list-unit-files       ##列出服务的开 ...