CSS基础

最新推荐文章于 2024-04-19 20:33:06 发布

LEIQINGQI

最新推荐文章于 2024-04-19 20:33:06 发布

阅读量1.3k

点赞数 6

文章标签： CSS

本文链接：https://blog.csdn.net/LEIQINGQI/article/details/81415203

版权

css 基础

css 基础

CSS 简介

css 指层叠样式表（Cascading Style Sheets）
样式通常存储在样式表中
外部样式表可以极大提高工作效率，它存储在CSS 文件中
多个样式定义可层叠为一
万维网联盟（W3C）在HTML4.0之外创造出样式（Style）

样式层叠次序

当同一个HTML 元素定义了多个样式时，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，4拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（在<head>标签中）
4. 内联样式（在html元素内部）

CSS 语法

CSS 实例 1

<html>
<head>
<style>
body {backgroud-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>
<body>
<h1> This header is 36 pt</h1>
<h2> This header is blue </h2>
<p>  This paragraph has a left margin of 50 pixels </p>
</body>
</html>

这里写图片描述

CSS规则

css 规则由两个主要部分构成，以及一条或多条声明：
选择器通常是需要改变样式的HTML 元素
每条声明由一个属性和一个值组成
属性（property）是需要设置的样式属性，每一个属性有一个值，属性和值被冒号分开
CSS声明总以分号（;）结束，声明组以大括号{}括起来

CSS 颜色

在描述颜色的时候，除了使用英文单词外，还可以使用十六进制的颜色值 #ff0000

p {color: #ff0000; }

为了节约字节，还可以使用CSS缩写形式

p { color: # f00;}

还可以使用RGB值，当值为0时，也要使用百分号符号

p{ color: rgb(255,0,0);} p{ color: rgb(100%, 0%, 0%);}

CSS注释

使用 /* */

CSS Id 和 Class 选择器

如果要在HTML 元素中设置CSS 样式，需要在元素中设置id 和class 选择器

id 选择器以 # 来定义

ID 属性不以数字开头，

ID属性智能在每个HTML 文档中出现一次。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

#para1

{
  text-align:center;
  color:red;   
}
</style>
</head>
<p id="para1"> hello world!!</p>
<p> This paragraph is not affected by the style.</p>
</body>
</html>

class 选择器以 . 定义

CSS 中class 选择器可以在多个元素中使用

class选择器在HTML中以class 属性表示， CSS 中，类选择器以一个点 . 显示

<style>
    .center
    {
        text-align:center;
    }
</style>
<h1 class ="center"> 标题居中</h1>
<p class ="center"> 段落剧中</p>

也可以指定特定的HTML 元素使用class

所有的 p 元素使用class =”center” 让该元素的文本居中

<style>
    p.center
    {
        text-align:center;
    }
</style>
<h1 class="center"> This heading will not be affected</h1>
<p class="center"> This paragraph will be center-aligned.</p>

元素选择器 –>标签名字

CSS 创建

插入样式表的方法有三种

外部样式表
北部样式表
内联样式

外部样式表

当样式需要应用多个页面时，，外部样式表是理想的选择。可以改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在头部：

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>

不要再属性值与单位之间留有空格

内部样式表

可以使用 <style> 标签在文档头部定义内部样式表

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

内联样式

慎用这种方法，当样式仅需在一个元素上应用一次时

<p style="color:sienna; margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同样式表中相同的选择器定义，那么属性值将从更具体的样式表中被继承过来。

外部样式表：

h3
{
color:red;
text-align:left;
font-size:8pt;
}

内部样式表：

h3
{
text-align:right;
font-size:20pt;
}

最终h3的效果是

color: red;
text-align：right;
font-size:20pt;

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，数字7拥有最高的优先权

通用选择器(*)
元素（类型）选择器
类（class）选择器 .
属性选择器
伪类
ID选择器 #
内联样式

CSS Backgrounds

CSS 属性用于定义HTML 元素的背景

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

页面的背景颜色在body的选择器中

body {background-color:# b0c4de;}

h1， p，和div元素拥有不用的背景颜色

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div { background-color:# b0c4de;}

背景图像

body {background-image:url('paper.gif');}

默认情况下，background-image属性会在页面的水平或者垂直方向平铺（重复出现）

如果图像只在水平平铺：

body 
{
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}

如果不想平铺（也就是图像只出现一次），可以使用background-repeat属性，还可以利用

background-position 属性改变图像在背景中的位置:

background-position

body 
{
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
}

top bottom left right center 也可以使用100px，也可以使用百分比

关键字

top bottom left right center ，只要保证不出现超过两个关键字，一个对应水平方向，一个对应垂直方向，关键字可以以任何顺序出现。如果只有一个关键字，另一个为center

如果希望每个段落中部上方出现一个图像，只需声明如下：

p
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top;
}

百分比

图像在其元素居中 background-position:50% 50%;

在水平方向2/3，垂直方向 1/3处，background-position:66% 33%;

长度值

图像的左上角在元素内部左上角向右 50px，向下 100 px上 background-position: 50px 100px;

CSS Text

文本的对齐方式

可以居中，左对齐，右对齐，justify ( p 是一个标签，点后面是一个class)

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

a { text-decoration:none;} 主要用来删除连接的下划线

### 文本转换

用来指定在一个文本中的大写，小写字母

所有都大写，小写，单个单词首字母大写 ( p 是一个标签，点后面是一个class)

p.uppercase { text-transform:uppercase;}
p.lowercase { text-transform:lowercase;}
p.capitalize{ text-transform:capitalize;}

文本缩进

CSS 提供了text-indent 属性，所有元素的第一行可以缩进一个给定的长度

p { text-indent: 50px;}

文本间隔

word-spacing改变字，单词之间的标准间隔

p { word-spacing:30px;}

字母间距

h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}

文字阴影

h1 {text-shadow:2px 2px #F00;}

<h1> 文字周围有阴影<h1>

文字方向

h1.ex1 {direction:rtl;}

<div class="ex1"> 从右到左的书写方向 </div>

行间距

p.small {line-height:70%;}
p.big {line-height:200%;}

例子

<!DOCTYPE html>
<html>
<head>
    <style>
    h1
    {
        text-align: center;
        text-transform: uppercase;
        color: #A7C942;
    }
    p
    {
        text-indent: 50px;
        text-align:justify;
        letter-spacing:3px;
    }
    a
    {
        text-decoration:none;
    }
</style>
</head>

<body>
    <h1>text formatting</h1>
    <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
        The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
        <a target="_blank" href="tryit?filename=trycss_text">"Try it yourself"</a> link.</p>
    </body>
    </html>

CSS Fonts

serif 和sans-serif 字体之间的区别

这里写图片描述

字体系列

font-family 属性设置本文的字体系列

作为一种“后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体，如果字体名称超过一个字，需要使用引号，多个字体使用逗号分隔指明

p {font-family:"Times New Roman", Times, serif;}

字体样式

指定斜体文字的字体样式属性

正常 - 正常显示文本
斜体 - 以斜体字显示的文字

倾斜 - 文字向一边倾斜

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

字体粗细

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

width height

width 优先于height，优先满足width

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
img.normal
{
    height:auto; 
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

CSS 链接（link）

链接样式

链接的样式，可以用任何的CSS 属性（颜色，字体，背景）

特别的链接，可以有不同的样式，取决于链接的状态

有四个链接状态：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 用户鼠标放在链接上
a:active - 链接被点击的那一刻

前后顺序重要，

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>
    a:link {color:#FF0000;text-decoration:none;background-color:#B2FF99;}    /* unvisited link，红色 */
    a:visited {color:#00FF00;text-decoration:none;background-color:#FFFF85;} /* visited link，绿色 */
    a:hover {color:#FF00FF;decoration:underline;background-color:#FF704D;}   /* mouse over link，粉色 */
    a:active {color:#0000FF;decoration:underline;background-color:#FF704D;}  /* selected link，蓝色 */
</style>
</head>

<body>
    <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
    <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
    <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

CSS 列表样式（ul）

作用

设置不同的列表项标记为有序列表（数字或字母）
设置不同的列表项为无序列表（小黑点，小方框）
设置列表项为图像

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:square;}
    ol.c {list-style-type:upper-roman;}
    ol.d {list-style-type:lower-alpha;}
    ul.f 
    {
        list-style-image:url('/statics/images/w3c/sqpurple.gif');
    }
</style>
</head>

<body>
    <p>无序列表实例:</p>

    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <ul class="b">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <ul class="f">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <p>有序列表实例:</p>

    <ol class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

    <ol class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

</body>
</html>

list-style-type

none : 不使用项目符号
disc : 实心圆
circle : 空心圆
square : 实心方块
demical : 阿拉伯数字
lower-alpha : 小写英文字母
upper-alpha : 大写英文字母
lower-roman : 小写罗马数字
upper-roman :大写罗马数字

ps：还有一个list-style-position

CSS Table(表格)

表格中的标签有 <table><th><tr><td><caption><thead><tbody><tfoot>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>


    table, th,td{
        border-collapse: collapse;
        border: 2px solid black;
    }
    td{

        height:50px;
        width:10%;
        text-align:right;
        vertical-align:bottom;
        padding:15px;
        background-color:black;
        color:blue;
    }
</style>
</head>

<body>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
        </tr>
    </table>
</body>
</html>

CSS box model (盒子模型)

CSS盒子模型，盒子中封装周围的HTML 元素：边距，边框，填充，实际内容
这里写图片描述

元素的宽度和高度

下面的例子总宽度为300px

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS Border (边框)

CSS border 可以是围绕元素内容和内边距的一条或多条线，对于这些线条，可以设置样式、宽度、颜色

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
    p.one
    {
        border:5px solid red;
    }
    p.two 
    {
        border-style:solid;

        border-width:1px 4px 8px 12px ;
        border-color:red blue transparent yellow;
    }

</style>
</head>

<body>
    <p class="one">This is some text in a paragraph.</p>
    <p class="two">Some text.</p>
    <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>

</html>

border-style(required) 的值
这里写图片描述

border-style(required) border-width border-color 的值都可以从1个到4个

可以在border 中设置width style color

border:5px solid red;

CSS outline （轮廓）

绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用
属性制定了样式，颜色和外边框的宽度
属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或者消失不会影响文档流，不会导致文档的重新显示

属性	说明	值
outline	在一个声明中设置所有的外边框属性	outline-color outline-style outline-width inherit
outline-color	设置外边框的颜色	color-name hex-number rgb-number invert inherit
outline-style	设置外边框的样式	none dotted dashed solid double groove ridge inset outset inherit
outline-width	设置外边框的宽度	thin medium thick length inherit

outline: outline:green dotted thick;

<head>
    <style>
        p.two
        {
        border:1px solid red;
        outline-color: yellow;
        outline-style:dotted;
        outline-width:3px;
        }
    </style>
</head>
<body>
    <p class="one">This is some text in a paragraph.</p>
    <p class="two">This is some text in a paragraph.</p>
</body>

CSS Margin(外边距)

margin 属性定义元素周围的空间
margin属性接受任何长度单位、百分数甚至负值

CSS Padding （填充）

属性定义元素边框与元素内容之间的空间。

padding 属性可以使用长度值，百分比值，但与margin不同，不能使用负值。

padding 属性的百分比数值是相对于其父元素的width计算的，如果改变了父元素的width，他就会改变。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
    p
    {
        background-color:yellow;
    }
    p.padding
    {
        padding: 10px 50px 10px 50px;
    }
</style>
</head>

<body>
    <p>This is a paragraph with no specified padding.</p>
    <p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>

padding 可以代替：padding-top padding-bottom padding-right padding-left

CSS 分组和嵌套

分组

<style> h1,h2,p { color:green;}</style>

嵌套

<style>
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
    color: yellow;
}
.marked p
{
    color:white;
}
</style>

p 和marked 不一样

只用p标签，是蓝色字体，居中。加 class=”marked” 背景红色，白色字体。

CSS 尺寸

Dimension 属性允许控制元素的高度和宽度。也允许增加行间距

几个属性： height line-height max-height max-width min-height min-width width

CSS Display 和Visible

Display :显示 Visibility : 可见性

隐藏元素

display:none visibility:hidden ，不可见的元素仍然占用空间，不显示的元素不占用空间

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <style>
    h1.hidden {visibility:hidden;}
</style>
</head>

<body>
    <h1>可见的</h1>
    <h1 class="hidden">不可见的</h1>
    <p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>
    h1.hidden {display:none;}
</style>
</head>

<body>
    <h1>This is a visible heading</h1>
    <h1 class="hidden">This is a hidden heading</h1>
    <p>注意,隐藏标题没有占用空间.</p>
</body>

</html>

Display 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行

<span>
<a>

可以将内联元素改为块元素

<!DOCTYPE html>
<html>
<head>
    <style>
    li{display:inline}
</style>
</head>
<body>

    <p>Display this link list as a horizontal menu:</p>

    <ul>
        <li><a href="/html/" target="_blank">HTML</a></li>
        <li><a href="/css/" target="_blank">CSS</a></li>
        <li><a href="/js/" target="_blank">JavaScript</a></li>
        <li><a href="/xml/" target="_blank">XML</a></li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>
    span
    {
        display:block;
    }
</style>
</head>
<body>

    <h2>Nirvana</h2>
    <span>Record: MTV Unplugged in New York</span>
    <span>Year: 1993</span>
    <h2>Radiohead</h2>
    <span>Record: OK Computer</span>
    <span>Year: 1997</span>

</body>
</html>

CSS positioning(定位)

允许将布局的一部分与另一部分重叠，还可以完成需要多个表格才能完成的任务。

四种定位方法：

Static 定位

HTML 元素的默认值，没有定位，元素出现在正常的流中，

静态定位元素不会受到top, bottom, left, right 影响

Fixed 定位（不随窗口动）

元素的位置相对于浏览器窗口是固定位置（窗口时滚动的，元素不会动）

<style> p.pos_fixed { position:fixed; top:30px; right:5px; } </style>

Fixed 定位的元素会与其他元素重叠

Relative 定位（参照物为元素正常的位置）

相对定位元素的定位是相对其正常位置。

<style>
h2.pos_left 
{ 
    position:relative; 
    left:-20px; 
} 
h2.pos_right 
{ 
    position:relative; 
    left:20px; 
}
</style>

可以重叠

Absolute 定位（参照物为`<html>`）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

可以重叠

重叠的元素

z-index 属性制定了一个一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或者负数的堆叠顺序

cursor

当鼠标移动到指定元素上方的时候，更改光标样式

<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

overflow

设置元素内溢出的内容如何显示

overflow有四个值 auto hidden scroll visible

auto 和scroll 差不懂，都是在垂直方向和水平方向上加上滚动条

hidden：不显示溢出的内容

<style>
div
.scroll
{
    background-color:#00FFFF;
    width:100px;
    height:100px;
    overflow:scroll;
}

.hidden 
{
    background-color:#00FF00;
    width:100px;
    height:100px;
    overflow:hidden;
}
.auto 
{
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow:auto;
}
</style>

CSS Float(浮动)

属性： float

定义元素在哪个方向浮动，浮动元素会生成一个块级框，知道该块级框的外边缘碰到包含框或者其他浮动框为止。

图片会在浮动在右边，因为是浮动的，图片的左边可以有文字

<style>
div
{
    float:right;
    width:120px;
    margin:0px 0px 10px 10px;
    padding:10px;
    border:1px solid yellow;
    text-align:center;
}
</style>

<div>
<img src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
CSS is fun!
</div>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

这里写图片描述

图片水平布局

<style>
    .thumbnail
    {
        float:left;
        width:110px;
        height:90px;
        margin:5px;
    }
</style>

这里写图片描述

clear

指定段落左侧或者右侧不允许浮动的元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>W3Cschool教程(w3cschool.cn)</title> 
    <style>
    .thumbnail 
    {
        float:left;
        width:110px;
        height:90px;
        margin:5px;
    }
    .text_line
    {
        clear:both;
        margin-bottom:2px;
    }
</style>
</head>

<body>
    <h3>图片库</h3>
    <p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="207" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
    <h3 class="text_line">第二行</h3>
    <img class="thumbnail" src="/statics/images/course/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/statics/images/course/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/statics/images/course/klematis4_small.jpg" width="120" height="90">
</body>
</html>

放段落的第一个字母浮动到左侧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title>
<style>
span
{
    float:left;
    width:1.0em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}
</style>
</head>

<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>

</body>
</html>

这里写图片描述

属性	描述	值
clear	指定不允许元素周围有浮动元素	left right both none inherit
float	制定一个元素是否可以浮动	left right none inherit

CSS Horizontal Align (块元素)

块元素对齐

中心对齐，margin

左右边距设置为“自动”对齐

.center 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:70%; 
    background-color:#b0e0e6; 
}

如果宽度是100%，对齐是没有效果的

position 属性设置左，右对齐

.right 
{ 
position:absolute; 
right:0px; 
width:300px; 
background-color:#b0e0e6; 
}

float属性设置左，右对齐

.right 
{ 
float:right; 
width:300px; 
background-color:#b0e0e6; 
}

text-align 是设置元素内部的文字的对齐方式

CSS 组合选择符

CSS 组合选择符包括各种简单选择符的组合方式

后代选择器（空格）
子元素选择器（大于号）
相邻兄弟选择器（加号）
普通兄弟选择器（波浪号）

后代选择器（）

div p { background-color:yellow; }

只要p 在div中，p中的内容就有效

子元素选择器（>）

child selectors

div p {background-color:yellow;}

当p是div下面一层（子代）时，p中内容有效

相邻兄弟选择器（+）

adjacent sibling selector, 可以选择紧接在另一元素后的元素，且二者有相同的父元素，

选取位于 <div> 后面的第一个 <p>元素：

div+p { background-color:yellow }

普通兄弟选择器（~）

选取所有指定元素的相邻兄弟元素

选取所有 <div> 元素之后的所有相邻兄弟元素 <p>

div ~p {background-color:yellow; }

CSS pseudo-classes(伪类) :

语法

selector: pseudo-class { property: value;}

selector.class:pseudo-class {property:value;}

用来添加一些选择器的特殊效果

由于状态的变化是非静态的,所以元素达到一个特定状态时，它可能得到一个伪类的样式，当状态改变时，它又会失去这个样式。它的功能与class 有点类似，但它是基于文档之外的抽象，所以叫伪类。

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */

:first-child

选择器匹配作为任何元素的第一个子元素的 <p> 元素

p : first-child { color:blue;}

匹配所有 <p> 元素的第一个 <i> 元素

p > i : first-child { color:blue; }

匹配第一个第一个 <p> 元素中所有的 <i> 元素

p : first-child i { color: blue;}

:lang

lang 类为属性值为no的q元素定义引号的类型：

<style> 
    q:lang(no) {quotes: "~" "~";} 
</style>    

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

:focus

<style>
    input:focus
    {
        background-color:yellow;
    }
</style>
<form action="demo-form" method="get">
    First name:<input type="text" name="fname" /><br/>
    Last  name:<input type="text" name="lname" /><br/>
    Password:  <input type="password" name="psw" /><br/>
    <input type="submit" value="Submit" />
</form>

CSS 伪元素

语法

selector: pseudo-element { property:value;}

selector.class:pseudo-element { peoperty:value;}

:first-line

对文本的首行设置特殊样式

对p元素的第一行文本进行格式化

:first-letter

向文本的首字母设置特殊样式

<style>
p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}
</style>
<p>wenzi</p>

:before

在元素的内容前面插入新内容

在每个 <h1> 元素前面插入一副图片

h1: before
{
    content:url(/statics/images/course/smiley.gif);
}

:after

在元素的内容之后插入新内容

在每个 <h1> 元素后面插入一副图片

h1:after
{
   content:url(http://www.w3cschool.cn/statics/images/course/smiley.gif);
}

选择器	示例	实例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个 `<p>` 元素的第一个字母
:first-line	p:first-line	选择每个 `<p>` 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 `<p>` 元素
:before	P:before	在每个 `<p>` 元素之前插入内容
:after	P:after	在每个 `<p>` 元素之后插入内容
:lang	p:lang	在 `<p>` 元素的lang 属性选择一个开始值

LEIQINGQI

关注

6
点赞
踩
49

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

css 基础CSS 简介样式层叠次序CSS 语法CSS 实例 1CSS规则CSS 颜色CSS注释CSS Id 和 Class 选择器id 选择器以 # 来定义class 选择器以 . 定义元素选择器 –&amp;gt;标签名字CSS 创建外部样式表内部样式表内联样式多重样式多重样式优先级顺序CSS Backgrounds背景颜色背景图像bac...
复制链接

扫一扫