CSS学习笔记

来源：互联网发布：caffe官网教程编辑：程序博客网时间：2024/06/14 15:29

结合方式一 html标签上加上style属性. 属性的值填写Css代码.

所有标签都有style属性.

<p style="color:red;" > This is my HTML page. </p>

结合方式二 使用head标签中的style标签.设置页面样式.style中填写css代码

<style type="text/css">

p{

color:red;

}

结合方式三 

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

p.css这个是一个文件

CSS 语法一

标签选择器:

标签名称{

}

}

例如

<style type="text/css">

a{

color:blue;

}

语法二

<!-- 

id选择器:

#标签id{

}

注意: 使用id时.要保证id的值在页面中是唯一的 

<head> 

--> <style type="text/css">

#one{

color:yellow;

}

</style>

</head>

<body>

<a id="one" > This is my HTML page. </a><br>

<a> This is my HTML page. </a>

</body>

<!-- 

class选择器:

.class名称{

}

注意: 使用id时.要保证id的值在页面中是唯一的 

-->

<head>

<style type="text/css">

.one{

color:green;

}

</style>

</head>

<body>

<p>This is my HTML page.</p>

<p class="one" >This is my HTML page.</p>

<!-- 伪类选择器:

选择标签的某个状态.需要配合其他选择器来使用

l link 未访问过

v visited 访问过

h hover 悬浮

a active 激活,点击 

-->

<head>

<style type="text/css">

a:link{

color:green;

}

a:visited{

color:black;

}

a:hover{

color:white;

}

a:active{

color:pink;

}

</style>

</head>

<body>

<a href="01-结合方式1.html" >点我</a>

</body>

多种结合

<style type="text/css">

#one,.two,font{

color:green;

}

</style>

</head>

<body>

<a id="one" >点我</a>

<p class="two" >点我</a>

<font>点我</font>

</body>

//字体属性

<style type="text/css">

/* p{

font-family: 黑体;

font-size: 25px;

font-style:oblique;

font-weight:900;

font-variant:small-caps;

} */

p{

font:oblique small-caps 900 25px 黑体;

}

</style>

</head>

<body>

<p class="two" >

hello itcast! itheima!

床前明月光,疑是地上霜</a>

</body>

<style type="text/css">

/*

background : background-color || background-image || background-repeat || background-attachment || background-position

body{

background-image: url("mn.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

}

*/

body{

background: url("mn.jpg") no-repeat fixed center;

}

</style>

<!-- 

块级标签 => 占据的范围是一行

div p ul li ol,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

行内标签 => 占据的是行中的一部分

span a font b .......................

-->

margin 指盒子外部距离

#two{

height: 100px;

width: 100px;

margin-left:100px;

margin-top:100px;

}

Padding 的设置 padding 是内部的内边距

#one{

padding: 10px 30px 50px 80px;

}

padding : 1个值 上下左右

2个值 1.上下 2.左右

3个值 1.上 2.左右 3.下

4个值 1.上 2.右 3.下 4.左

0 0