CSS (上)

第二章 CSS核心基础

第二节：CSS基本选择器
1，标记选择器
2，类别选择器
3，ID选择器 (实际开发用得少，不好维护)

<html>
<head>
<meta charset="UTF-8">
<title>标记选择器</title>
<style type="text/css">
    p{
        color: red;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p>爱编程！爱Java</p>
</body>
</html>
-----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title>类别选择器</title>
<style type="text/css">
    .r{
        color: red;
        font-size: 20px;    
    }
    
    .b{
        color: blue;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p class="r">爱编程！爱Java</p>
<p class="b">爱生活！爱拉芳</p>
<p class="b">爱生活！爱撸码</p>
</body>
</html>
---------------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
    #p1{
        color: red;
        font-size: 20px;    
    }
    
    #p2{
        color: blue;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p id="p1">爱编程！爱Java</p>
<p id="p2">爱生活！爱拉芳</p>
</body>
</html>

View Code

第三节：在 HTML中引入 CSS的方法
1，行内样式 (实际开发用得少，不好维护)
2，内嵌式
3，链接式 (用到时再取，性能好)
4，导入样式（了解）（页面一加载就把样式全部导入）
5，几种方式的优先级比较 (总的规律：后面的样式会覆盖前面的样式)

<p style="color: red;font-size: 20px;">行内样式</p>

----------------------------------------------------------------------

<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style type="text/css">
    p{
        color: red;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p>内嵌式</p>
</body>
</html>
-------------------------------------------------------------------------

<html>
<head>
<meta charset="UTF-8">
<title>链接式</title>
<link href="red.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>链接式</p>
</body>
</html>

-------------------------------------------------------------------------

<html>
<head>
<meta charset="UTF-8">
<title>优先级比较</title>
<link href="red.css" type="text/css" rel="stylesheet">
<style type="text/css">
    p{
        color: blue;
        font-size: 20px;    
    }
    @import url(yellow.css);
</style>
</head>
<body>
<p >行内样式 &gt;链接式&gt;内嵌式&gt;导入式(链接式在后面)<br/>
行内样式 &gt;内嵌式&gt;导入式&gt;链接式(链接式在前面)<br/>
总的规律：后面的样式会覆盖前面的样式
</p>
</body>
</html>

View Code

第四章 CSS高级特性

第一节：复合选择器
1.1 “交集”选择器交集选择器是and；交集选择器只能交2个，其中第1个是标记，第2个是类选择器或者ID选择器，相交的部分才具有此属性，挨着写不用空格。
1.2 “并集”选择器并集选择器是or；并集选择器可多个，把这些选择器都加样式,中间用“,”隔开。

<html>
<head>
<meta charset="UTF-8">
<title>“并集”选择器</title>
<style type="text/css">
    p{
        font-size: 30px;
    }
    /* 交集选择器 */
    p.c{
        text-decoration: underline;
    }
    
    .c{
        color: blue;
    }
    /* 并集选择器 */
    p,h1,.c,#d1{
        background-color: gray;
    }
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>
</html>

View Code

1.3 “后代”选择器某个父节点下面的所有指定子节点上。以空格隔开
1.4 “子”选择器只在直接后代起作用，区别于“后代”选择器。以“>”连接。

<head>
<meta charset="UTF-8">
<title>“后代”选择器</title>
<style type="text/css">
    span{
        color: blue;
    }
    
    p span{
        color: red;
    }
</style>
</head>
<body>
<div>一代<p>二代<span>三代</span></p></div><br/>
<span>一层一代</span><br/>
<span>也是一层一代</span><br/>
</body>

--------------------------------------------------------------------------


<title>“子”选择器</title>
<style type="text/css">
    div>span{
        color: pink;
    }
</style>
</head>
<body>
<div>
    <span>儿子</span>
    <p><span>孙子</span></p>
</div>
</body>

View Code

第二节：CSS的继承特性子节点都会继承父节点的样式，有的样式不能继承，如border。

<html>
<head>
<meta charset="UTF-8">
<title>CSS的继承特性</title>
<style type="text/css">
    .c{
        color: red;
    }
</style>
</head>
<body>
<h1>Java技术</h1>
<ul>
    <li class="c">网页基础
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>动态网页</li>
    <li>J2EE框架</li>
</ul>
</body>
</html>

View Code

第三节：CSS的层叠特性

样式冲突时，优先级规则。
层叠样式的规则：
行内样式 > ID 样式 > 类别样式 > 标记样式

<html>
<head>
<meta charset="UTF-8">
<title>CSS的层叠特性</title>
<style type="text/css">
    p{
        color: blue;
    }
    
    .red{
        color: red;
    }
    
    #p3{
        color: green;
    }
    
</style>
</head>
<body>
<p>第一行文本</p>
<p class="red">第二行文本</p>
<p class="red" id="p3">第三行文本</p>
<p style="color: orange;" class="red" id="p3">第四行文本</p>
</body>
</html>

View Code

第五章用CSS 设置文本样式

第一节：设置文字的字体 (多写几个，如果系统没有第一个，就会选择后面的)
第二节：设置文字的倾斜效果
第三节：设置文字的加粗效果
第四节：设置英文字母大小写转换
第五节：设置文字的大小
第六节：设置文字的装饰效果

<title>设置文字的字体</title>
<style type="text/css">
    .p1{
        font-family: "Times New Roman",Arial
    }
    
    .p2{
        font-family: 微软雅黑,黑体,宋体
    }
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day.</p>
<p class="p2">好好学习，天天向上。</p>
--------------------------------------------------------------------
<title>设置文字的倾斜效果</title>
<style type="text/css">
    p{
        font-style: italic;
    }
</style>
--------------------------------------------------------------------
<title>设置文字的加粗效果</title>
<style type="text/css">
    p{
        font-weight: bold;
    }
</style>
------------------------------------------------------------------
<title>设置英文字母大小写转换</title>
<style type="text/css">
    .p1{
        text-transform: capitalize;
    }
    
    .p2{
        text-transform: uppercase;
    }
    
    .p3{
        text-transform: lowercase;
    }
</style>
</head>
<body>
<p>study Hard And Make Progress Every Day.</p>
<p class="p1">study Hard And Make Progress Every Day.</p>
<p class="p2">study Hard And Make Progress Every Day.</p>
<p class="p3">study Hard And Make Progress Every Day.</p>
</body>
------------------------------------------------------------------
<title>设置文字的大小</title>
<style type="text/css">
    p{
        font-size: 36px;
    }
</style>
------------------------------------------------------------------
<title>设置文字的装饰效果</title>
<style type="text/css">
    .p1{
        text-decoration: none;
    }
    
    .p2{
        text-decoration: underline;
    }
    
    .p3{
        text-decoration: line-through;
    }
    
    .p4{
        text-decoration: overline;
    }
</style>
</head>
<body>
<p class="p1">无装饰</p>
<p class="p2">下划线</p>
<p class="p3">删除线 原价990</p>
<p class="p4">上划线</p>
</body>

View Code

第七节：设置段落首行缩进
第八节：设置字词间距
第九节：设置文字的行高
第十节：设置段落之间的距离 (涉及盒模型)
第十一节：设置文本的水平位置
第十二节：设置文字和背景的颜色

<title>置段落首行缩进</title>
<style type="text/css">
    p{
        text-indent: 2em;
    }
</style>
------------------------------------------------------------------
<title>设置字词间距</title>
<style type="text/css">
    p{
        word-spacing: 20px;     /* 单词间距 */
        letter-spacing: 2px;    /* 字母间距 */
    }
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
------------------------------------------------------------------
<title>设置文字的行高</title>
<style type="text/css">
    p{
        line-height: 1.5;
    }
</style>
------------------------------------------------------------------
<title>设置段落之间的距离</title>
<style type="text/css">
    p{
        border: 1px red solid;
        margin: 1px;   /* 段落之间的距离 */
        padding: 10px;   /* 节点内部与文字的边距 */
    }
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
------------------------------------------------------------------
<title>设置文本的水平位置</title>
<style type="text/css">
    p{
        border: 1px red solid; 
    }
    
    .box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}
    .box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:center;}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p style="text-align: left;">好好学习，天天向上。</p>
<p style="text-align: right;">好好学习，天天向上。</p>
<p style="text-align: center;">好好学习，天天向上。</p>

<div class="box1">There is clearly a need for CSS to be taken seriously  .css file. Yes, really</div>
<div class="box2">There is clearly a need for CSS to be taken seriously  .css file. Yes, really</div>
</body>
------------------------------------------------------------------
<title>设置文字和背景的颜色</title>
<style type="text/css">
    p{
        color: blue;
        background-color: red;
    }
</style>
------------------------------------------------------------------

<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

View Code

第十三节：设置段落的垂直对齐方式

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

第六章用CSS 设置图像效果

第一节：设置图片边框
第二节：设置图片大小及缩放
第三节：图文混排
第四节：设置图片与文字的对齐方式

<title>设置图片边框</title>
<style type="text/css">
    .i1{
        border-width: 1px;
        border-color: red;
        border-style: solid;
    }
    /* 不提倡上面的写法，用简写 */
    .i2{  
        border: 2px red dashed;
    }
    
    .i3{
        border: 2px red dotted;
    }
    
    .i4{
    
        border-top: 6px red solid;
        border-right:2px blue dashed;
        border-bottom: 2px yellow dotted;
        border-left: 2px blue dashed;
        
    }
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点画线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同的边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>
</html>

------------------------------------------------------------------------

<title>设置图片大小及缩放</title>
</head>
<body>
<div style="border: 1px red solid;">
    <h1>图片大小</h1>
    <img  src="../java.jpg" style="width: 160px;height: 180px;"/>
</div>
<div style="border: 1px red solid;">
    <h1>图片缩放</h1>
    <img src="../java.jpg" style="width: 20%;"/>   <!-- 相当于父窗体的20% -->
</div>
</body>
</html>

---------------------------------------------------------------------------

<title>图文混排</title>
<style type="text/css">
    img{
        width: 150px;
        height: 180px;
        float: left;    /* 向左环绕 */
        margin: 5px;
    }
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大，是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时，他编写了多处理器版本的Unix操作系统。</p>
<p>1991年，在Sun公司工作期间，高斯林和一群技术人员创建了一个名为Oak的项目，旨在开发运行于虚拟机的编程语言，同时允许程序在电视机机顶盒等多平台上运行。后来，这项工作就演变为Java。随着互联网的普及，尤其是网景开发的网页浏览器的面世，Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。</p>
</body>

-----------------------------------------------------------------------------

<title>设置图片与文字的对齐方式</title>
<style type="text/css">
    p{
        border: 1px red solid;
    }
</style>
</head>
<body>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: baseline;"/> 方式：<img src="../blue.jpg" style="vertical-align: baseline;"/>baseline</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: top;"/> 方式：<img src="../blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: middle;"/> 方式：<img src="../blue.jpg" style="vertical-align: middle;"/>middle</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-top;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: sub;"/> 方式：<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: super;"/> 方式：<img src="../blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: 20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: 20px;"/>20px;</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: -20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px;</p>
</body>

View Code

posted @ 2017-03-06 12:33 SKYisLimit 阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

SKYisLimit

CSS (上)

公告