zoukankan      html  css  js  c++  java
  • 02 初识css 、 css类选择器、 id选择器、 html选择器

    内容介绍

    1.初识css

    2.块级元素和行内元素

    3.Css核心内容

    a) 标准流

    b) 盒子模型

    c) 浮动

    d) 定位

    4.综合案例

    a) 盒子模型经典案例

    b) 仿搜狐首页面布局

    css的必要性:

    栏目不同的风格不同的页面,我们如何统一其样式?【css

    <span> 标签

    用来组合文档中的行内元素以便通过样式来格式化它们。

    span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

    如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。

    可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

    从使用span元素可以看到,css基本语法:

    <元素名 style=“属性名: 属性值;属性名:属性值;”/>

    元素可以使html的任何元素

    属性名:属性值要参考w3c组织给出的文档

    统一风格前:

    <!--DOCTYPE:文档类型  用于指定dtd(说明当前html文件版本) -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css1.html</title>
        <!--keywords是给 搜索引擎看的  -->
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <!-- 网页描述 -->
        <meta http-equiv="description" content="this is my page">
        <!-- 告诉浏览器文件的编码格式 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--引入css  -->
        <link rel="stylesheet" type="text/css" href="./styles.css">
    
      </head>
      <body>
        <!-- style内联属性 -->
        <span style="font-size:30px;color:blue;">栏目一</span> <br/>
        <span style="font-size:10px;color:red ;font-style:italic;">栏目二 </span><br/>
        <span style="font-size:40px;color:green ;font-weight: bold;">栏目三</span><br/>
        <span style="font-size:20px;color:pink ;font-weight: lighter;">栏目四</span><br/>
        <span style="font-size:20px;color:pink ;font-weight: lighter;">栏目五</span><br/>
      </body>
    </html>

    浏览器显示效果:

    <style> 标签用于为 HTML 文档定义样式信息。(用于指定内部css)

    在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

    如需链接外部样式表,请使用<link>标签。

    使用css 统一风格(内部CSS):

    <!--DOCTYPE:文档类型  用于指定dtd(说明当前html文件版本) -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css1.html</title>
        <!--keywords是给 搜索引擎看的  -->
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <!-- 网页描述 -->
        <meta http-equiv="description" content="this is my page">
        <!-- 告诉浏览器文件的编码格式 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--引入css -->
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        
        <!--内部CSS  -->
        <style type="text/css" >
        .style1{
            font-size:20px;
            color:red;
            font-weight:bold;
            font-style:italic; 
            text-decoration:underline;      
        }
        </style>
     </head>
     <body>
        <span class="style1">栏目一</span> <br/>
        <span class="style1">栏目二 </span><br/>
        <span class="style1">栏目三</span><br/>
        <span class="style1">栏目四</span><br/>
        <span class="style1">栏目五</span><br/>
     </body>
    </html>

     浏览器显示效果:

    css的必要性

    汶川大地震时所有的网站的图片都变成黑白的了,这个是怎么实现的呢?

    这里用到了滤镜技术。

    css的滤镜体验

    图片本来是彩色的将其变成黑白的

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css10-2.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
      
      <!-- CSS滤镜功能-->
      <!-- <style> 标签用于为 HTML 文档定义样式信息。
         在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
        type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。
        style 元素位于 head 部分中
      -->
      
      <style type="text/css">
      /*谷歌浏览器支持*/ img { -webkit-filter: grayscale(100%); } </style> </head> <body> <img src="images/cat.jpg" width=200 style="filter:gray" /> </body> </html>

    效果(谷歌浏览器下)【滤镜前后进行的对比图】:

                               

    Css的四种选择器:

    ①类选择器,又叫class选择器

    id选择器

    html元素选择器

    ④通配符选择器

    类选择器的基本语法:

    .类选择器名称{

    属性名:属性值;

    }

    Id选择器

    基本用法:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

    #id 选择器名{

    属性名:属性值; 

    }

    在html文件中如果要引用id选择器,则

    <元素 id=id选择器的名称”>

    Html选择器(CSS 属性选择器)

    如果我们希望网页默认的文字颜色是某一种颜色,则可以使用html选择器 

    html选择器(CSS 属性选择器)  选择器的名字必须为html元素的名称

    结论:当一个元素同时被id选择器,类选择器,html选择器修饰时

    则优先级是  Id > 类 > html

    css10-3.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css10-3.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!-- 引入外部css文件  -->
        <link rel="stylesheet" type="text/css" href="./css10-3.css">
    
      </head>
      
      <body>
        <p>北京,你好!</p>
        <span class="style1" >新闻1</span>
        <span class="style1" >新闻2</span>
        <span class="style1" >新闻3</span>
        <span class="style1" >新闻4</span>
        <span class="style1" >新闻5</span><br/><br/>
        <span class="style1" id="style2" >这是一则重要的新闻</span>
        
      </body>
    </html>

    css10-3.css文件

    /*style1是 类选择器*/
    .style1 {
        font-weight: bold;
        font-size: 20px;
        background-color:pink;    
        color:black;
    }
    
    /*style2是 id选择器   id 属性只能在每个 HTML 文档中出现一次*/
    #style2 {
        font-size:30px;
        background-color:silver;
        color:red;    
    }
    
    /*html选择器(CSS 属性选择器)  选择器的名字必须为html元素的名称    */
    body {
        color:orange;    
    }

    运行效果图:

     任务:

    我们希望所有的超链接【如何实现】

    (1)默认样式是黑色,24px,没有下划线

    (2)当鼠标移动到超链接时,自动出现下划线

    (3)点击后,超链接变成红色    

    链接的四种状态:

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻

    css10-4.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css10-4.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="Cache-Control" content="no-cache" /> 
        <link rel="stylesheet" type="text/css" href="./css10-4.css">
    
      </head>
      
      <body>
        <a href="http://www.sohu.com">搜狐主页</a><br/><br/>
        <a href="http://www.163.com">网易主页</a><br/><br/>
      </body>
    </html>

    css10-4.css

    /*html选择器*/
    a:link {
        color:black;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    a:visited {    
        color:red;
    }

      

  • 相关阅读:
    Brain network involved in autonomic functions 与自主功能相关的大脑网络
    Brief summary of classical components of ERP 事件相关成分(ERP)经典成分小结
    ICA & Percentage Variance Account For (PVAF)
    数据处理中白化Whitening的作用图解分析
    Loadings vs eigenvectors in PCA 主成分分析(PCA)中的负荷和特征向量
    主成分分析(PCA)和独立成分分析(ICA)相关资料
    Sketch of heart and QRS complex 心脏及QRS波群简图
    Brain Network visulation in EEG 脑电网络可视化
    Phase Locking Value (PLV) 神经信号的锁相值
    ubuntu16.04下的一些基本操作笔记
  • 原文地址:https://www.cnblogs.com/super90/p/4509440.html
Copyright © 2011-2022 走看看