内联框架 超链接 CSS的编写位置 CSS语法 开发工具 块和内联 常用选择器 子_后代元素选择器 伪类 伪元素

内联框架:

超链接:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>超链接<title>

</head>

<body>

<h1>我是demo12</h1>

<a href="http://www.baidu.com">我是一个超链接</a>

</body>

</html>

CSS的编写位置:

<!DOCTYPE html>

<html>

<head>

<meta charest="utf-8" />

<title>CSS</title>

<style type="text/css">

p{

color:red;

font-size:40px;

</style>

</head>

<body>

<p style="color:red;font-size:40px;">111111111111</p>

<p>11111111111</p>

<p>111111111111</p>

<p>111111111111111</p>

<p>1111111111111111111111111</p>

</body>

</html>

CSS语法:

<!DOCTYPE html>

<html>

<head>

<meta charest="utf-8" />

<title>CSS语法</title>

<style type="text/css">

/*

选择器 声明块

*/

p{

color:red;

font-size:40px;

</style>

</head>

<body>

<p>哈答复客户的发放 是饭卡上的发生flask会发生

</p>

</body>

</html>

开发工具:

TAB:可以补全代码

ctrl+回车:不在行尾也可以新建一行

ctrl+shlft+B:复制一行

ctrl+shlft+k:删除一行

CTRL+alt+上(下):多行编辑

块和内联:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charest="utf-8" />

<title>块和内联</title>

</style>

</head>

<body>

<div style="background-color: red; width: 200px;">

我是一个div

</div>

<div style="background-color: yellow; width: 200px;">

我是一个div

</div>

<p>我是一个p标签</p>

<p>我是一个p标签</p>

</body>

</html>

常用选择器:

<!DOCTYPE html>

<html>

<head>

<meta charest="utf-8" />

<title>元素选择器</title>

<style type="text/css">

p{

color: red;

}

</style>

</head>

<body>

<h1>好诗</h1>

<p>1234567</p>

<p>2345678</p>

<p>3456789</p>

<p>4567890</p>

<p>5678901</p>

<p>6789012</p>

</body>

</html>

子_后代元素选择器:

<!DOCTYPE html>

<html lnag="en">

<head>

<meta charest="utf-8" />

<title>子元素和后代元素选择器</title>

<style type="text/css">

span{

color:green;

}

</style>

</head>

<body>

<div>

<span>我是div标签的span</span>

<p><span>我是p标签的span<span></p>

</div>

<span>我是body标签中的span</span>

</body>

</html>

伪类

<!DOCTYPE html>

<html lang="en">

<head>

<meta charest="utf-8" />

<title>伪类选择器</title>

<style type="text/css">

a{

color: red;

}

</style>

</head>

<body>

<a href="http://www.baidy.com">访问过的连接</a>

<br /><br />

<a href="http://www.baidu123456.com">没访问过的连接</a>

</body>

</html>

伪元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容