秋天中的一片叶
秋天中的一片叶

【CSS】两周玩转CSS （上部）

一，CSS 简介

CSS 概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用

、

、

这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

二，CSS 基础选择器

<1> 标签选择器用法 
* 基础选择器
1. 标签选择器的用法:直接给出标签，一并把此标签的样式改变成设定的样式(注意 ：这种用法是改变所有标签的属性)
h2 {
   /* 以下是颜色及文字设定的几种常用方法 */
   color: deeppink; /* 指定颜色 */
   font-size: 30px;/* 指定字体大小 一定要跟上px单位。代表像素的意思 */
   font-weight: 700;/* 指定文字的粗细 700代表加粗，400代表正常字体 后面不需要跟px单位 */
   font-style: normal/* 指定文字的变化.例如斜体是intalic 正常字体是normal*/
    }

<2> 类选择器用法

2. 类选择器的方法: .自定义类名 {属性样式}来指定。当创建好类以后.谁使用就通过class="自定义类名"的方式来调用。

.class {
            text-align: center;/* 文字居中显示 */
} 
.black { 
　　　　　　　/* 设置字体颜色及大小*/
　　　　　　　color: black; 
            font-size: 16px;
　　　　}

<3> id择器用法

3. id选择器的方法: id选择器的使用同类选择器基本相同。但是唯一不同的是，ID选择器只能被调用一次.

#id名 {属性} 通过id = "id名"来调用

        */
        #blue {
            color: blue;  /*设置字体大小*/
        }

<4> 综合案例演示　





    
    
    综合案例演示
    



    
青春不常在，抓紧谈恋爱
性别：
生日：        
所在地区:
婚姻状况:
学历:
喜欢的类型:
自我介绍：
我同意注册条款和会员加入标准
我是会员，立即登录

我承诺

  • 年满18岁，单身
  • 抱着严肃的态度
  • 真诚寻找另一半

CSS基本选择器案例演示

三，CSS 类选择器

上述案例中已经综合演示了类选择器。为了更好的对类选择器有更深刻的印象。对类选择器再做一个三个盒子的综合案例演示。

图片的话这里就不提供了。随便上网下载几张即可。




    
    
    类选择器的案例演示

    



    
    

    

    

    

　

四，CSS 类选择器 --- 多类名的使用

以下案例可以看出.box中只是设置了div盒子的大小。.red 和 .green分别设定了自己的颜色。class中既调用了box中的方法也调用了自身的方法，这种使用类型就叫做多类名的使用。要注意的是类名跟类名之间必须通过空格隔开




    
    
    多类名的使用场景

五，CSS 字体样式 --- （font-style）

通过font-style关键字可以对字体的样式进行改变。例如斜体，粗体，

font-style 属性最常用于规定斜体文本。

该属性有三个值：

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。





    
    
    字体样式
    




    
 今日新闻

    
苏州工业园区2.5产业园附近修路，导致路段通勤困难。请早晚高峰期避开此路线！




　

六，CSS 字体居中显示 --- （text-align）

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与

您可能会认为 text-align:center 与

元素的作用一样，但实际上二者大不相同。

不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

案例演示




    
    
    text-align字体居中
    


    
星期一

    
星期二

    
星期三


　

七，CSS 文本装饰器 --- （text-decoration）

接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。




    
    
    文本装饰

    




    
今天晚上吃火锅！！！！！

    去往火锅店
    
鸳鸯锅，麻辣锅



　

六，CSS 字体缩进 --- （text-indent）

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。




    
    
    文本缩进
    


    
2日晚，数百名抗议者无视疫情禁令，走上法国首都巴黎的街头，声援美国抗议者，并要求为本国遭受警察“暴行”的受害者讨回公道。


    法国街头的抗议活动（资料图）法国街头的抗议活动（资料图）

    
报道称，有关部门禁止疫情期举行大型集会，但这并没有阻止大批示威者出动。他们喊着“为乔治伸张正义”、“为阿达玛伸张正义”的口号上街游行。


    
据介绍，阿达玛指的是2016年24岁法国黑人阿达玛•特拉奥雷（Adama Traore）一案。这名年轻人在被警方拘留数小时后意外死亡。案件仍在调查中，有媒体称阿达玛是在警察试图制服他时窒息而死。

七，上述六大环节的综合案例演示





    
    
    综合案例(对之前html及css学过的内容的练习)
    



    
朝鲜宣布与韩国“断联”，原来是为了这事……

    
    

        

            2020年06月10日 00:01
            中国新闻网
        

    



原标题：朝鲜宣布与韩国“断联”，原来是为了这事……


中新网6月10日电 （何路曼 刘淙）近日，朝鲜半岛局势再起波澜。朝方宣布，从9日中午开始与韩国“断联”——切断朝韩之间一切通讯联络线。而韩方则表示，根据朝韩协议，双方应当维系联络渠道。



朝鲜这一举动，事出何因？这次“断联”，对朝鲜半岛局势及韩朝间的关系，影响几何？而面对当前局面，韩国又有何表态？








    资料图：韩方工作人员通过朝韩联络热线与朝方联系。

 　　

已有预兆


6月9日一早，朝鲜官方通讯社——朝中社发公告称，朝方有关部门从当地时间9日12时开始，彻底断绝并废除通过朝韩共同联络办公室一直维持的朝韩通讯联络线、朝韩军方之间的东西海通讯联络线、朝韩通讯试验联络线、朝鲜劳动党中央本部大楼和青瓦台之间的热线通讯联络线。



朝方这一举动，看似突然，但并非无迹可寻。几天前，朝方就曾多次释放针对韩方的信号。



 　



    图二 资料图：朝鲜劳动党中央委员会第一副部长金与正。



6月4日，朝鲜劳动党中央委员会第一副部长金与正发表谈话，强烈谴责“脱北者”团体散布反朝传单，并强调韩方若不采取相应措施，将面临拆除开城工业园区、关闭朝韩联络办公室、解除《关于落实板门店宣言中军事领域共识的协议》等一系列后果。

　

次日，朝鲜统一战线部发言人再次发表谈话，谴责“脱北者”从韩国向朝鲜方向散布反朝传单，以及韩方“纵容此事”的态度。发言人表示，朝方的第一步行动，是关闭设在开城工业园区的朝韩联络办公室，此后还将采取其它相应措施。

　

“实际上是切断同韩国的这种联系，但从更广阔的角度来看，这反映了朝鲜对韩国基本政策的一种调整。”中共中央党校教授、朝鲜半岛问题专家张琏瑰在接受中新网记者采访时表示。



吉林大学行政学院国际政治系教授、高丽大学亚细亚研究院访问学者王生则对中新网表示，其实朝方表达的，是对韩国政府的一种不满：其一是谴责韩方纵容“脱北者”的行为，其二是想通过此事对韩国进行施压，目的是希望国际社会重视朝韩关系发展，重视朝鲜半岛局势或朝美核谈判的发展进程。



　　


当地时间2018年4月27日下午，朝韩领导人在经过一天会谈后，共同签署《板门店宣言》。




    
或再开通





实际上，朝鲜所提到的朝韩共同联络办公室，从倡议建立至今，经历了不少曲折。



2018年4月27日，韩国总统文在寅和朝鲜最高领导人金正恩在板门店会晤后，发表《板门店宣言》，宣布双方将为实现朝鲜半岛无核化和停和机制转换而努力。

　　

而共同联络办公室，就是根据《板门店宣言》协议内容，设立的朝韩历史上首个共同联络办公室，坐落于朝鲜开城工业园内。


据韩国统一部此前的介绍，该机构将履行朝韩联系与交涉、政府间会谈与磋商、民间交流与援助、为朝韩人员往来提供便利等职能。朝韩还将通过办公室，就南北铁路和公路连接与现代化、山林合作等《板门店宣言》履行事项，进行商议。





当地时间2016年2月11日，韩国坡州市，韩政府决定停止开城工业园区运营，韩方企业正准备从开城工业区撤出。

王生举例说，像开城工业园区关闭之后，现在恢复起来就非常难。朝方此次这样做，主要“还是对韩国有点失望”，希望韩国能够继续推动（朝韩关系发展）。“朝鲜对美关系、对韩关系不可能一蹴而就，都是要经过这样一些反反复复的博弈过程。”他指出。

　　

在朝鲜9日发表公报后，韩国有关部门当天上午就再次通过多条朝韩联络渠道拨打朝方电话，但朝方均未接听。



朝韩之间的通讯，真的会就此中断吗？

　　

“关闭也可能只是暂时的，随着朝韩关系的改善或发展，它还可以恢复或再开通，不是永久性关闭。”王生说。




资料图：当地时间2014年10月10日，韩国坡州，韩国一民间团体散发反朝传单，约两万张反朝传单随气球升空。


“应当维系”
　　

在金与正发表谈话的当天，韩国国防部发言人崔贤洙在例行记者会上，就朝鲜谴责“脱北者”散布反朝传单，并提及朝韩《九一九军事协议》或被解除一事表示，韩方坚持履行《军事协议》的立场不变。



此外，韩国统一部官员还在6月7日表示，在金与正发表谈话前，韩方已着手推进涉朝传单的立法工作。与朝方谈话无关，韩方将继续就对朝传单问题采取措施。
    

　　

当地时间2019年6月30日下午，美国总统特朗普乘坐直升机抵达朝韩非军事区。韩国总统文在寅也同步抵达。

　　

不仅如此，韩国也一直与“老大哥”美国保持联系。


韩国外交部7日表示，韩美外交部门举行了工作层磋商，探讨了朝鲜问题。韩美就包括金与正谈话在内的朝鲜问题紧密保持沟通，正在密切关注有关动向。



韩媒推测，韩国外交部朝鲜半岛和平交涉本部长李度勋和美国常务副国务卿兼对朝特别代表比根，近期可能就有关事宜交换意见。不过，张琏瑰和王生两位专家都表示，美国不会干预其中。

　　

“相关渠道是朝韩沟通协调的基本途径，根据朝韩协议，双方应当维系这些联络渠道。” 9日，韩国统一部对朝鲜宣布关闭朝韩所有通讯联络渠道一事，表明立场。

　　
　　

图七 2019年6月，韩国首次向公众开放韩朝非军事区徒步游。图为游客正在体验徒步游，步道周围铁丝网环绕。中新社记者 曾鼐 



未来如何？


其实，这并不是朝韩联络渠道第一次中断。算上这次，12年来朝韩之间共“断联”五次。



这一次，态势将如何发展？

　　

张琏瑰表示，韩国非常希望他们的“3.0版阳光政策”取得成绩，这时候不可能采取任何的报复措施。若朝鲜下一步提出各方面的要求，韩国会一步步去完成。

　

“朝鲜对‘脱北者’的一些言行非常反感，韩国应该在这一问题上制定一些相关政策”。王生指出，朝鲜半岛局势最主要的问题，还是朝韩关系的发展，特别是韩国应该积极主动推动双方关系的发展，用来带动其他双边关系的发展。

　　

王生分析称，在美国11月大选结果出来之前，朝鲜半岛局势可能会维持现状。但朝鲜是否能等到那个时候，还是未知数。如果朝鲜希望各方加紧推动半岛局势谈判进程，可能还会释放一些施压的筹码。（完）

　　
　　


关键字 : 朝鲜板门店宣言
View Code

八，复合选择器  --- 后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

This is a important heading


This is a important paragraph.

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用

后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。

假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。





    
    
    复合选择器
    
    
    
    




    
    
        
  1. 白色
    2. 
        
  2. 黑色
    3. 
        
  3. 蓝色
    4. 
        
  4. 粉色
    5. 
        
  5. 红色
    6. 
        
  6. ol li中的a
    7. 
    


    
    
        
  • 晴天
    • 
        
  • 阴天
    • 
        
  • 雨天
    • 
    

    
    
        
  • 星期一
    • 
        
  • 星期二
    • 
        
  • 星期三
    • 
        
  • 星期四
    • 
        
  • 星期五
    • 
        
  • 星期六
    • 
        
  • 星期日
    • 
    



　

九，复合选择器  --- 子选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

This is very very important.


This is really very important.

语法解释

您应该已经注意到了，子选择器使用了大于号（子结合符）。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。





    
    
    子选择器
    
    




    



　

十，复合选择器  --- 并集选择器

并集选择器理解起来很简单就是将多个选择器联合起来使用，中间通过逗号作为分割。

这样做的好处在于。对于多标签但是需要设定相同样式的案例来说可以通过并集选择器一个选择器完成之前多选择器设定的情况。





    
    
    并集选择器
    



    
爷爷

    
爸爸

    
儿子

    
孙子

    
重孙子

    
    
        
  • 你们真的是五世同堂呀！！
    •

十一，伪类选择器  --- 链接选择器

我们能够以不同的方法为链接设置样式。

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

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

实例

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

  • a:hover 必须位于 a:link 和 a:visited 之后
  • a:active 必须位于 a:hover 之后

常见的链接样式

在上面的例子中，链接根据其状态改变颜色。

让我们看看其他几种常见的设置链接样式的方法：

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：

实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景色

background-color 属性规定链接的背景色：

实例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

 





    
    
    伪类选择器之链接选择器

十二，伪类选择器  --- focus选择器

focus一般对于文本框中鼠标点击出呈现不同颜色的状态，这类的案例比较多。主要是增加用户体验的。同Input连用！！





    
    
    :focus伪类选择器
    
    



    用户名:  

    密 码:      

    域 名：  

十三，行内元素转行内块元素

一、行内元素和块级元素

1.1、块级元素（inline）：

　　　　　　它独占一行；

　　　　　　它的宽高可以设置；

　　　　　　默认时，宽度是100%；

　　例如：
、、
    、
       、
    1. 等。

1.2、行内元素（block）：

　　　　　　它的宽度由内容决定，高度有内容字体大小决定；

　　　　　　它不可以设置宽高；

　　　　　　它可以和其他的行内元素位于同一行；

　　例如：、