css基础1

Css(实现了页面和样式的彻底分离)

写入样式表的三种方式:

内联样式表,嵌入样式表,外部样式表。

内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表

样式表的选择器(通过选择器帮我们获得页面上要获得样式的元素)

写什么标签就拿到了什么标签。(当页面中所有标签都用同一种样式的时候用html选择器)

什么时候用id选择器什么时候用类选择器:

当同一个页面中某些元素显示同一个样式的时候一般用类选择器,id选择器一般是唯一的。

Css当中属性非常多,大体上可以分为以下几类:字体,背景,文本,位置,布局,边缘,列表。

下面是一些关于样式表的例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <!--外部样式表-->
    <link href="test.css" rel="stylesheet" type="text/css" />
    <!--嵌入样式表-->
    <style type="text/css">
        p {
            background-color:yellow;
            font-size:xx-small;
        }
    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗,处处好风光</p>
    <!--内联样式表-->
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光,你是第上传</tt>
</body>
</html>

选择器的分类:

class类选择器,HTML选择器,ID选择器,关联选择器,伪元素选择器,组合选择器。

下面是class类选择器的例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        p.pp1 {
            background-color:red;
        }
        tt.tt1 {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗,处处好风光</p>
    <!--内联样式表-->
    <p class="pp1">今天天气好晴朗,处处好风光</p>
    <p class="pp1">今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <h1>呵呵</h1>
    <tt class="tt1">窗前明月光,你是第上传</tt>
</body>
</html>

HTML选择器:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style>

    </style>
</head>
<body>
    <p style="background:red;font-size:xx-large">今天天气好晴朗,处处好风光</p>
    <!--内联样式表-->
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光,你是第上传</tt>
</body>
</html>

ID选择器:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            background-color:black;
        }
        #p2 {
            background-color:blue;
        }

    </style>
    <meta charset="utf-8" />
</head>
<body>
    <p id="p1">今天天气很好</p>
    <p id="p1">今天天气很好</p>
    <p id="p2">今天天气很好</p>
    <p id="p3">今天天气很好</p>
    <p id="p4">今天天气很好</p>
</body>
</html>

关联选择器:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        p em {
            background-color:red;
        }
    </style>
</head>
<body>
   
    <p><em>今天天气好晴朗,处处好风光</em></p>
    <em>haha</em>
    <em>haha</em>
    <em>haha</em>
    <em>haha</em>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <h1>呵呵</h1>
    <tt>窗前明月光,你是第上传</tt>
</body>
</html>

伪元素选择器:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <!--伪元素选择器是对同一个html元素的各种状态和其所在的部分内容的一种定义形式,例如,对于超链接标签的正常状态,访问过的状态,选中的状态,光标移到超链接上的状态-->
    <style type="text/css">
        a:active {
            text-decoration:none;
        }
        a:hover {
            font-size:xx-large;
        }
        p::first-line {
            font-size:xx-small;
        }
        p::first-letter {
            background-color:red;
        }
    </style>
</head>
<body>
    <p>晋太原中,武陵人捕鱼为业,缘溪行<br />
        晋太原中,武陵人捕鱼为业,缘溪行</p>
    <a href="#">超链接</a>
</body>
</html>

组合选择器:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        h1,h2,td {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <h1>我是一个大标题</h1>
    <h2>我是一个二号标题</h2>
    <table border="1px" cellpadding="0px" cellspacing="0px">
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
        <tr>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
            <td>粉刷本领强</td>
        </tr>
    </table>
</body>
</html>

2.关于文档流:什么是文档流?就是html会将控件从上到下排列,不会出现覆盖的情况。

当用css给div设定位置并把position设置为:absolute时,就可以将div设置在需要固定的位置,使其摆脱文档流的束缚。

其中 z-index是元素在页面中的第多少层,越大越在上面,相当于ps中图层的概念。

下面是一个小例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        div {
            height:300px;
            width:300px;
        }
            div.div1 {
                background-color:rebeccapurple;
                top:100px;
                left:130px;
                position:absolute;/*绝对定位,定在哪儿就在哪儿,脱离文档流的限制*/
                z-index:3;/*确定显示在哪一层*/
            }
            div.div2 {
                background-color:green;
                top:110px;
                left:140px;
                position:absolute;
                z-index:2;
            }
            div.div3 {
                background-color:yellow;
                top:120px;
                left:150px;
                position:absolute;
                z-index:1;
            }
    </style>
</head>
<body>
<div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

效果如图所示:

在很多网页中会弹出那种恭喜你,被QQ抽中中奖的广告的弹窗怎么实现的呢?用css也能轻松实现。

下面是一个小例子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        .div1 {
            right:0px;
            bottom:0px;
            position:fixed;/*absolte当页面拉动时跟着动,fixed是页面拉动的时候不动*/
            height:300px;
            width:300px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="div1"></div><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</body>
</html>

其中,position的fixed的意思是把那个div窗体固定在某一位置的意思。即使页面上下拉动,它也始终固定在一个地方。

下面是运行效果:

今天就先总结到这里!88

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

一个搜索条样式,包括select的美化

一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD X...

24350
来自专栏一“技”之长

iOS流布局UICollectionView系列六——将布局从平面应用到空间

        前面,我们将布局由线性的瀑布流布局扩展到了圆环布局,这使我们使用UICollectionView的布局思路大大迈进了一步,这次,我们玩的更加炫一...

9320
来自专栏技术总结

学会不一样的Loading图

上述效果,其实很多app就单纯这样使用了,但是我们为了更美化,决定为其增加动态效果

13440
来自专栏jianhuicode

带着问题写React Native原生控件--Android视频直播控件

最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法...

1.9K80
来自专栏程序员互动联盟

【专业技术】搜狗歌词窗口如何来实现

大家都见过以前Sogou歌词窗口的样子吧,感觉是歌词的字体直接贴在windows桌面上一样,但是还可以用鼠标控制,这个是怎么做成的呢?其实我也不知道^_^,估计...

381100
来自专栏转载gongluck的CSDN博客

CListCtrl控件使用方法总结

今天第一次用CListCtrl控件,遇到不少问题,查了许多资料,现将用到的一些东西总结如下: 以下未经说明,listctrl默认view 风格为report ...

437130
来自专栏mukekeheart的iOS之旅

iOS学习——核心动画

  Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

15340
来自专栏Alice

一个layer可以跟着画完的线移动ios程序 好玩啊。

用法:采用的是关键帧实现的。    实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 。即当线画完之后,图形开始移动,并且能够停在最后的那个...

23160
来自专栏Flutter入门

Flutter开发实战分析-animation_demo瞎复写总结

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码)

61130
来自专栏格子的个人博客

Markdown语法学习记录

鉴于每次写博客,写文章的时候,总是要重复去查询Markdown的相关语法,这种闹心的感觉我再也不要了。

11220

扫码关注云+社区

领取腾讯云代金券