zoukankan      html  css  js  c++  java
  • java day17第十七课 HTML和CSS

    HTML和CSS

    1、Html就是超文本标记语言的简写,是最基础的网页语言
    2、Html是通过标签来定义的语言,代码都是由标签组成。
    3、Html代码不用区分大小写
    4、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
    5、头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载
    6、体部分是真正存放页面数据的地方。
    
    	多数标签都是由开始标签和结束标签,其中有个别变迁因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
    	想要对被标签修饰的 内容进行更丰富的操作,就用刀了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
    	属性与属性值之间用"="连接,属性值可以用双引号或者不用引号,一般都会用双引号,或公司规范书写规范
    	
    	
    	格式:<标签名 属性名="属性值">数据内容</标签名>
    		  <标签名 属性名="属性值" />
    		  
    	操作思想:
    	为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对同期中的数据进行操作,就是在不断的改变容器的属性值
    	
    

    常见标签:

    Html和Css

    HTML常见标签库

    Brackets下载安装

    其他标签

    
    <base>
    href 属性:指定网页左右的超链接的目录,可以是本地目录,也可以是网络目录。注意值的结尾处已定窑用/表示目录,只作用于相对路径的超链接文本。target 属性:指定打开超链接的方式。如:_blank表示所有的超链接都用新窗口打开显示
    
    <meta>
    name属性:网页的描述信息,当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索
    http-equiv 属性:模拟HTTP协议的响应头
    如:<meta http-equiv="refresh" content="2" url="http://www.baidu.com">
    表示2秒刷新一次此页面
    
    <link>
    rel 属性:描述目标文档与当前文档的关系
    type 属性:文档类型
    media:指定目标文档在哪个地方起作用
    如:
     <link rel="stylesheet" type="text/css"  href="a.css">
    
    <marquee>
    direction属性 left down up right 
    behavior 属性 scroll alternate slide
    <pre>可以将文本内容按在代码区的样子显示在页面上</pre>
     
    
    

    Css介绍

    CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果,可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性。并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
    那么CSS和html是如何在网页代码中相结合的呢?

    通过四种方式:

    1、style属性方式

    style属性方式:
    利用标签中style属性来改变每个标签的显示样式。
    例:<p style="background-color:#ff0000;color:#ffffff">p标签显示内容</p>
    
    

    2、style标签方式(内嵌方式)

    在head标签里加入style标签,对多个标签进行统一修改。
    该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活
    <head>
        <meta charset="UTF-8">
        <title>CSSdemo</title>
        <style type="text/css">
       
            p {color: aqua;}
           
                
        </style>
        
    </head>
    <body>
    
        <p>这是显示head标签里面设置style标签的效果</p>
    </body>
    
    

    3、导入方式

    前提是已经存在一个定义好的CSS文件,网页的一部分样式需要用到,name就用刀这种方式。例:
    <head>
        <meta charset="UTF-8">
        <title>CSSdemo</title>
        <style type="text/css">
            @import url(div.css);
               
        </style>
        
    </head>
    <body>
        <div></div>
    </body>
    注:url括号后面必须要用分号结束,如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。
    
    

    4、链接方式

    通过head标签中的link标签来实现,前提也是先要有一个已定义好的css文件例:
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSSdemo</title>
        <link rel="stylesheet" href="div.css" type="text/css"/>
        
    </head>
    <body>
    
        
        <div></div>
    </body>
    </html>
    注:可以通过多个link标签链接进来多个css文件,重复样式以最后链接进来的css样式为准。
    

    5、样式优先级

    自上到下,由外到内,优先级由低到高。
    标签选择器<类选择器<id选择器<style属性
    
    

    6、总结CSS代码格式

    选择器名称  {属性名:属性值;属性名:属性值;......;}
    属性与属性之间用分号隔开
    属性与属性值之间用冒号连接
    如果一个属性有多个值的话,name多个值用空格隔开。
    
    

    7 、选择器

    就是指定css要作用的标签,哪个标签的名称就是选择器。意为:选择哪个容器。选择器有三种:
    a、html标签名选择器。使用的就是html的标签名。
    b、class选择器。其实使用的标签中的class属性。
    c、id选择器。其实使用的是标签中的id属性。
    每一个标签都定义了class属性和id属性,用语对标签进行标识,方便对标签进行操作。在定义中,多个标签的class属性值可以相通,而id值要唯一,因为JavaScript中经常用。
    
    

    8、class选择器

    在标签中定义class属性并赋值,通过标签名.class值,对该标签进行样式设置。
    例:
    在相同标签设置不同样式的时候,用class进行区分。
    p.pclass1{color:red;}
    p.pclass2{color:yellow;}
    
    <p class="p.pclass1">样式1</p>
    <p class="p.pclass2">样式2</p>
    不同标签进行相同设置的时候,用class进行统一定义。
    .classname{color:blue;}
    <p class="classname">p样式</p>
    <div class="classname">div样式</div>
    
    

    9、id选择器

    与class选择器蕾丝,但格式不同,选择器的名称为#id值。
    例:
    #pid {color:red;}
    <p id="pid">id设置样式</p>
    注:多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取酒会出错,所以形成习惯,确保id值的唯一性对于以后的数据库设计也会有好处。
    
  • 相关阅读:
    JS权威指南读书笔记(二)
    JS权威指南读书笔记(一)
    NodeList和HTMLCollection区别
    2016年前端技术展望
    Label标签for属性
    JavaScript Array vs new Array区别
    禁止滚动事件方法
    shim和polyfill 区别解释
    Html5知识精粹纪录
    前端url 相关设置获取总结
  • 原文地址:https://www.cnblogs.com/chendujie/p/6926280.html
Copyright © 2011-2022 走看看