css基础--常用css属性02

上篇地址:css基础--常用css属性01

本文参考菜鸟教程和w3school

1  浮动和清除浮动

在上篇的第十一节--定位中说道:

  CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

普通流和绝对定位已经说完,接下来就是浮动了。

什么是浮动?

  CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

  我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置

请注意

  元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

  一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  浮动元素之后的元素将围绕它。

  浮动元素之前的元素将不会受到影响。

浮动:    float  =  left

              right

              none

              inherit

<!DOCTYPE html>
<html lang="en">
<head>
<style>
img {
    float:left;
}
</style>
</head>

<body>
<h1>hello world</h1>
<img src="l.jpg"/>
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf
</body>
</html>

浮动实例

我们可以通过clear属性清除元素周围的浮动

clear    =    left/right/both/none/inherit

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

清除浮动实例

2  css伪类/伪元素

伪类的语法:

selector:pseudo-class {property:value;}

CSS类也可以使用伪类:伪类的名称不区分大小写。

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

以上就是css中的所有伪类。

其中专门针对链接的有四个:

:link     /* 未访问的链接 */
:visited       /* 已访问的链接 */
:hover      /* 鼠标划过链接 */     (这个hover伪类对其他块元素像<p>也是生效的,感兴趣的可以试试)
:active     /* 已选中的链接 */

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

:focus很有意思

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    input:focus{
        background-color: aquamarine;

    }
</style>
</head>

<body>

<h1>hello world</h1>
<form>
    name:<input type="text" name="name"/>
    job:<input type="text" name="job"/>
</form>

</body>
</html>

:focus实例

浏览器显示结果:

:first-letter

该伪类仅适用于块级元素。也就是说<p> <h1> 列表 表格 表单等块级元素都适用。(不清楚什么是块级元素?请点这里

<!DOCTYPE html>
<html>
<head>
<style>
li:first-letter
{
font-size:200%;
color:#8A2BE2;
}
    p:first-letter{
    font-size:200%;
color:#8A2BE2;
    }
</style>
</head>
<body>

<ul>
    <li>hello</li>
</ul>
    <p>hello world</p>
</body>
</html>

first-letter实例

:first-line

该伪元素也仅适用于块元素。

:first-child

匹配父元素中第一个子元素

:before和:after

:before 选择器向选定的元素前插入内容。使用content属性(content详解)指定要插入的内容

<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p>

</body>
</html>

:before实例

3  导航栏

绝大多数网页都会有导航栏,导航栏的重要性就不需要我说了。

导航栏大多是用列表来实现的。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin:0;
        padding:5px;

    }
    a{
        font-size: 28px;
        color:white;
        text-decoration: none;
        text-transform: uppercase;

    }
    a:hover{
        color:gainsboro;
        background-color:darkgrey;
    }
    li{
        float: left;
        width:10%;
        background-color: grey;
    }
</style>
</head>
<body>
<ul>
    <li><a href="http://baidu.com" target="_blank">first</a></li>
    <li><a href="http://baidu.com">second</a></li>
    <li><a href="http://baidu.com">third</a></li>
    <li><a href="http://baidu.com">fourth</a></li>
</ul>
</body>
</html>

不算丑的横向导航栏实例

时间: 2024-10-05 12:12:51

css基础--常用css属性02的相关文章

CSS一些常用的属性,学到你就赚到了!

****CSS一些常用属性*** 0.去掉下划线 :text-decoration:none ; 1.加上下划线: text-decoration: underline; 2.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px; 3.外边距:margin 4.内边距:padding 5.居中:margin 0 auto;(只是针对盒子居中) 6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了display标签..

玩转HTML5+跨平台开发[8] CSS基础-体验CSS

CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对html的要求越来越大,人们迫切需要html增加新的元素,去完成一个特定的功能 迫于压力,html开始出现<font>,<i> , <s>等标签.但是html是一种描述结构的语言,也开始描述外在表现了.几年之后这种随便的做法暴露出严重的问题:1:由于html既写结构又写样式,导致

css基础知识+css选择符(元素选择符、关系选择符)

首先我先介绍在html网页中怎么使用导入css样式的方法 1.行内样式:<p style="color:red">行内样式使用css</p> 2.页内样式:在head标签里设置 <span style="font-size:18px;"><head> <style> p{ color:red } </style> </head> <body> <p>页内使用c

css一些常用的属性

背景关联 background-attachment 属性body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; } CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置

css基础 一个class属性给两个名字(实用技巧)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

CSS中常用的属性

字体属性 Font-family 字体族科 Font-size  字体大小 Font-style  字体样式 Font-weight 字体加粗  normal |bold(加粗)|lighter(变细) Font-variant 字体变形   normal|small-caps Font:[字体风格] [字体变形] [字体加粗] <字体大小>[/行高] <字体族科> 颜色属性 Color 背景属性 Background-repeat: 背景重复 Repeat-x(x轴方向重复) |

CSS基础--常用样式

一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-repeat : repeat-x(仅水平平铺) repeat-y(仅垂直平铺) no-repeat(不平铺) 设置背景图片位置 background-position : 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px 背景图片是否滚动 backg

css不常用的属性选择器 当然会有他的用武之地

属性选择器可以 使用的情况是上面 这几种[attr] 只有这个属性的标签被选取[attr=value] 属性等于固定值的属性 完全等于[attr~=value] 属性约等于值 即空格分隔开的部分能选取到 空格分隔开的~[attr|=value] 是指属性值中用-连接的部分标签能选取到 包含用-连接的[attr^=value] 是指属性以什么部分开头的标签能选取到 以什么开头的属性值 [attr$=value] 是指属性以什么部分结尾的标签能选取到 以什么结尾的属性值[attr*=value] 是

css基础:样式属性

1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左