CSS基础-白红宇

CSS基础

阅读量：4176 次

发布时间：2019-05-26

本文共 2390 字，大约阅读时间需要 7 分钟。

<p>放在<div>里面

内联式样式表

直接对html写样式

<p style="font-size:50px; color:red">example</p>

嵌入式样式表

<head>

<!--

p {font-size:50px; color:red}

//-->

</style>

</head>

<body>

<p>example</p>

</body>

外部样式表

style/test.css

p {font-size:50px; color:red}

test.html

<head>

</head>

<body>

<p>example</p>

</body>

输入式样式表

style/demo.css

div {color:yellow;font-size:4cm;}

style/test.css

@import url(demo.css);

test.html

<head>

</head>

<body>

<div>example</div>

</body>

样式规则的选择器: {}前面的标签

html selector: p {font-size:50px; color:red}

class selector: 在同一个页面,类是可以重复的

<head>

<!--

p.one {color:red; font-size:1cm; background: green}

p.two {color:yellow; font-size:2cm; background: blue}

.three {color:blue; font-size:3cm; background: yellow}

.four {color:grey; font-size:4cm; background: red}

//-->

</style>

</head>

<body>

<p class="one">example 1</p>

<p class="two">example 2</p>

<div class="three">example 3</div>

<p class="four">example 4</p>

<a class="four">example 4</a>

</body>

id selector: 在同一个页面,id是不能重复(通常用于配合javascript操作)

<head>

<!--

#one {color:red; font-size:1cm; background: green}

#two {color:yellow; font-size:2cm; background: blue}

#three {color:blue; font-size:3cm; background: yellow}

#four {color:grey; font-size:4cm; background: red}

//-->

</style>

</head>

<body>

<p id="one">example 1</p>

<p id="two">example 2</p>

<div id="three">example 3</div>

<p id="four">example 4</p>

--<a class="four">example 4</a> XX,id在同一页面不能重复.

</body>

关联选择器(中间空格隔开):

标签嵌套

center p em{font-size:50px; color:red}

<center><p><em>example,em标签需要在p标签里面,p标签需要在center标签里面</em></p></center>

类嵌套

.one .two em{font-size:50px; color:red}

<center class="one"><p class="two"><em>example,em标签需要在p标签里面,p标签需要在center标签里面</em></p></center>

组合选择器(中间用逗号隔开):

p,div,a,hl,.one,#two{font-size:50px; color:red}

<p>example</p><div>example</div><em class="one">example</em>

伪元素选择器(冒号隔开):

a:link{font-size:1cm; color:red}

a:hover{font-size:2cm; color:green}

a:visited{font-size:3cm; color:yellow}

<a href="#">example</a>

a.one:link{font-size:1cm; color:red}

a.two:hover{font-size:2cm; color:green}

a.three:visited{font-size:3cm; color:yellow}

<a class="one" href="#">example 1</a>

<a class="two" href="#">example 2</a>

<a class="three" href="#">example 3</a>

转载地址：http://rutai.baihongyu.com/

你可能感兴趣的文章

PostgreSQL数据库管理第十章Repmgr

查看>>

Linux shell正则表达式-sed-awk-grep应用

查看>>

linux系统管理—第五章Linux-bashshell

查看>>

PostgreSQL数据库管理第二章体系结构

查看>>

PostgreSQL数据库管理第三章实例管理与管理工具

查看>>

PostgreSQL数据库管理第七章流复制

查看>>

PostgreSQL数据库管理第十章Repmgr

查看>>

PostgreSQL数据库管理第八章日常运维

Ubuntulinux离线安装ClamTk杀毒软件步骤和使用方法

查看>>

摆脱贫穷2021V1

查看>>

Android.Could not find *.apk

查看>>

JNI

查看>>

Android基于TranslateAnimation的动画动态菜单

查看>>

android NDK中的GCC编译器

查看>>

Android NOtification 使用

查看>>

Android的SharedPreferences保存与删除数据简单实例

查看>>

android 如何从sqlite读取数据到spinner下拉中显示

查看>>