CSS基础（十三）

CSS 2 基础

1、CSS简介

CSS：层叠样式表 (Cascading Style Sheets)，CSS定义如何显示 HTML 元素，解决了网页内容与表现

分离的问题。

2、CSS语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条CSS规则的声明:

选择器：用来确定CSS规则用于哪些HTML元素，图中的h1是标签选择器，表示给网页中的H1标签加效

果。后面有选择器的专门介绍。

每条CSS规则的声明由一个属性和一个值组成，用冒号分隔；多条规则之间用分号隔开。

3、CSS注释：

CSS代码注释符号：/* 注释内容 */

4、CSS分类：

根据CSS插入HTML中的位置不同，分成行内、嵌入、外部3种样式。

4.1 行内样式

行内样式将CSS代码写到标签内。比如：

在html中，通过style属性指定CSS规则。这种写法，不需要选择器。

4.2 嵌入样式

嵌入样式是将CSS代码写到头部head中，通过style标签包含。如：

<h1 style="color: red;">hello</h1>

<h2 style="color: blue;font-size:38px ;">hello</h2>

行内样式并没有解决网页内容和表现分离的问题。

<!DOCTYPE html>

<html>

<head>

h1{ /*标签选择器：这种标签有效果*/

color: red;行内样式并完全没有解决网页内容和表现分离的问题（至少在同一个网页中）。

4.3 外部样式

外部样式是将CSS代码写到独立的文件中（文件扩展名：.css）。网页需要引用外部CSS文件，CSS规

则才起作用。

比如：

CSS文件：my.css

HTML文件：test.html

HTML页面在头部引用外部CSS文件，有两种方法：

}

color: green; /*字体颜色*/

font-size: 32px; /*字体大小*/

}

</style>

</head>

<body>

<h1>hello1</h1>

<h2>hello2</h2>

<p>hello3</p>

</body>

</html>

/*外部css文件，直接写规则*/

h1{

color:red;

}

color: #008000;

font-size: 48px;

}

<!DOCTYPE html>

<html>

<head>

<!--导入法:

@import url("my.css");

</style>

-->

</head>

<body>

<h1>hello1</h1>

<h2>hello2</h2>

<p>hello3</p>

</body>

</html>分类

选择器名称

基础类

通配符选择器、标签选择器、ID选择器、Class选择器

组合类

组选择器、后代选择器、子元素选择器、相邻兄弟元素选择器

属性

属性选择器

伪类

伪类选择器

链接法：

导入法：

@import url("css文件地址");

</style>

它们的区别：

本质的差别：link属于HTML标签，而@import完全是CSS提供的一种方式。

加载顺序的差别：

当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的

CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样

式（就是闪烁），网速慢的时候会很明显。

兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才

能识别，而link标签无此问题。

使用dom：当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是

dom可以控制的。

所以，链接法更加常用。

5、CSS选择器

CSS 2中，常见的选择器有：

5.1 基础选择器：

5.1.1 通配符选择器

由于通配符选择器会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用通配符选

择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。比如：

/*通配符选择器，代表所有元素*/

margin: 0px; /*外边距*/

padding: 0px; /*内边距*/

}5.1.2 标签选择器

5.1.3 ID选择器

/*淘宝*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,

li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}

/*腾讯*/

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,s

elect{margin:0;padding:0}

/*新浪*/

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset,

legend, img { margin:0; padding:0; }

<!DOCTYPE html>

<html>

<head>

/*标签选择器：以html标签名作为选择器名*/

body{

background-color: #CCC;

}

color: #FFF;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*ID选择器：名称以#开头*/

/*在同一个页面中，html元素的ID不能重复*/

/*ID选择器用于给特定某一个元素加CSS*/

#mytitle{

color: red;

font-size: 50px;

}

#mystyle{5.1.4 Class选择器

text-decoration: underline;

font-size: 32px;

}

/*ID选择器前可以写标签名加以限制,表示只能这种标签使用*/

p#mystyle_2{

color: green;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>class选择器</title>

/*类选择器：名称以.开头，类选择器可以用于多个元素*/

.mycolor{

color: #FF0000;

}

/*类名前可以加限制*/

p.myfont{ /*只能用于p标签*/

font-size: 20px;

font-style: italic;

font-weight: bold;

text-decoration: underline;

}

#p1{

background-color: #008000;

}

</style>

</head>

<body>

<!--

一个标签可以使用多个类选择器

但只能使用一个ID选择器

-->5.2 组合选择器：

5.2.1 组选择器

5.2.2 后代选择器

</body>

</html>

/*组选择器：把多个选择器组合到一起，用逗号隔开*/

h1,h2,h3,h4,h5{

color: red;

}

#mystyle1,#mystyle2{

background-color: #008000;

}

<!DOCTYPE html>

<html>

<head>

/*后代选择器*/

h1 span{ /*h1中的span有效果*/

color: red;

text-decoration: underline;

}

table tr td p span{

color: green;

}

ul#list1 li span{

color: blue;

}

</style>

</head>

<body>

<h1>hello,<b><span>html</span></b></h1>

<tr>

<td>

<p>hello,<span>java</span></p>

</td>

</tr>

</table>

<li><span>hello1</span></li>

<li>hello2</li>

</ul>

</body>5.2.3 子元素选择器

5.2.4 相邻兄弟元素选择器

5.3 属性选择器

</html>

<!DOCTYPE html>

<html>

<head>

/*子元素选择器*/

h1>b>span{

color: red;

}

table>tbody>tr>td>p{

color: #008000;

}

</style>

</head>

<body>

<h1>hello,<b><span>html</span>css</b></h1>

<tr><td><p>hello1</p></td></tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*相邻的后一个兄弟元素有效果*/

h1+p{

color: red;

}

</style>

</head>

<body>

<h1>hello1</h1>

<p>hello2</p>

<p>hello3</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

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

h1[align]{ /*给带align属性的h1加效果*/

color: red;

}

h1[align="left"]{ /*带属性align并且值为left的h1有效果*/

background-color: #CCCCCC;

}

p[class~="c1"]{ /*部分匹配值*/

color: red;

}

p[class][align]{ /*多属性*/

color:green;

}

</style>

</head>

<body>

<h1 align="center">hello</h1>

<p class="c1 c2">hello</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*伪类选择器用于超链接效果，有4种，注意要按顺序编写(后面的优先级高)！*/

a:link{ /*未访问的超链接效果*/

color: #000;

text-decoration: none;

}

a:visited{ /*超链接访问过的效果*/

color:plum;

}

a:hover{ /*鼠标在超链接上方时的效果*/

color:#000099;

/*text-decoration: underline;*/

}

a:active{ /*超链接激活时的效果*/

color: #FF0000;

}

</style>

</head>

<body>

</body></html>

如果页面中有多组超链接，给不同的效果，可以通过跟class选择器或后代选择器配合实现。

<!DOCTYPE html>

<html>

<head>

/*伪类配合类选择器来使用*/

a.c1:link{

color: #000000;

text-decoration: none;

}

a.c1:hover{

color: #FF0000;

}

a.c2:link{

color: #00FF00;

text-decoration: none;

}

a.c2:hover{

color: #DDA0DD;

}

</style>

</head>

<body>

<ul>

</ul>

<br>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

/*伪类配合后代选择器来使用*/

ul#ul1 li a:link{

color: #000000;6、常见CSS属性

6.1 字体属性：

text-decoration: none;

}

ul#ul1 li a:hover{

color: red;

}

ul#ul2 li a:link{

color: #0000FF;

text-decoration: none;

}

ul#ul2 li a:hover{

color: #00FF00;

}

</style>

</head>

<body>

</ul>

<br>

</ul>

</body>

</html>

color:#ff0000; /*字体颜色*/

font-size: 32px; /*字体大小*/

font-family: 华文楷体; /*字体样式*/

font-weight: bold; /*加粗*/

font-style: italic; /*斜体*/

text-decoration: underline; /*下划线*/

text-shadow: #008000 0px 0px 10px ; /*文本阴影*/

letter-spacing: 10px; /*字符间距*/

word-spacing: 200px; /*单词间距*/

line-height: 30px; /*行高*/6.2 文本属性：

6.3 背景属性：

6.4 尺寸属性：

6.5 列表属性：

6.6 表格属性：

6.7 内补丁：

6.8 外补丁：

与内补丁padding用法类似。

text-indent: 10px; /*文本缩进*/

text-align: center; /*水平对齐方式*/

vertical-align: middle; /*垂直对齐方式:对于带valign属性的标签才有效果*/

background-color: #CCC; /*背景色*/

background-image: url(img/bg.jpg); /*背景图片*/

background-repeat: no-repeat; /*背景重复方式*/

background-size:50% 50%; /*背景大小:宽和高，CSS3提供的属性*/

background-attachment: fixed; /*背景是否固定*/

background-position: right bottom; /*背景图片位置：可以写方位单词或坐标，比如-45px

-95px;*/

width: 300px; /*宽*/

height: 200px; /*高*/

list-style-type: none; /*列表项编号类型*/

list-style-position: inside; /*列表项编号位置，默认outside*/

list-style-image: url(img/1.png); /*列表项编号所用图片*/

border-collapse: collapse; /*边框合并,相当于cellspacing="0"*/

border-spacing: 20px; /*边框间距：当border-collapse: separate

边框分开时才有效果*/

padding-left: 10px; /*左边内补丁*/

padding-right: 10px; /*右边内补丁*/

padding-top:5px; /*顶部内补丁*/

padding-bottom:5px; /*底部内补丁*/

/*padding: 10px; */ /*四个方向都是10px*/

/*padding: 10px 20px;*/ /*上下10，左右20*/

/*padding: 10px 20px 30px;*/ /*上10，左右20,下30*/

padding: 10px 20px 30px 40px; /*上10，右20,下30,左40*/6.9 布局属性：

float：设置一个盒子（元素）是否可以浮动，常见值：left（向左浮动）、right（向右浮动）、

none（不浮动）。经常用于divcss布局中设置水平方向排列的多个div或导航菜单。

案例：使用ul制作导航菜单

导航菜单html：

导航菜单css：

clear:清除元素周围的浮动对象。常见值：left、right、both。

案例：div+css布局

html部分：

margin-left: 10px; /*左边外补丁*/

margin-right: 10px; /*右边外补丁*/

margin-top:5px; /*顶部外补丁*/

margin-bottom:5px; /*底部外补丁*/

/*margin: 10px; */ /*四个方向都是10px*/

/*margin: 10px 20px;*/ /*上下10，左右20*/

/*margin: 10px 20px 30px;*/ /*上10，左右20,下30*/

margin: 10px 20px 30px 40px; /*上10，右20,下30,左40*/

<ul>

<li><a href="#">RedMI手机</a></li>

</ul>

ul{

list-style-type: none;

}

ul li{

float: left; /*通过float让列表项水平方向排列*/

padding: 5px;

margin:5px ;

}

ul li a{

color: #333;

text-decoration: none;

}

ul li a:hover{

color: orangered;

}

logo</div>

<ul>

</ul>

</div>

</div>

版权©....

</div>

css部分：

margin: 0px;

padding: 0px;

}

#all{

width: 800px;

/*height: auto;*/

margin: 0px auto; /*div居中*/

}

/*----logo部分css-------*/

#logo{

width: 800px; /*默认跟所在容器一样宽，即100%*/

height: 80px;

background-color: #000;

color: #FFF;

font-size: 40px;

font-weight: bold;

}

/*----内容部分css-------*/

#content_left{

width: 183px;

height: 400px;

border: 1px solid blue;

float: left; /*浮动*/

margin-right: 5px;

padding-left: 10px;

}

#content_right{

width: 598px;

height: 400px;

border: 1px solid green;

float: left; /*浮动*/

}/*----版权css-------*/

#copyright{

width: 800px;

background-color: #000000;

text-align: center;

color: #FFFFFF;

height: 40px;

clear: both; /*清除浮动对象,如果不清除，这个div将跑到中间浮动div的后面去。*/

}

display：设置元素的显示方式，常见值有：none（不显示）、block（块状显示）、inline（行内

显示）等。

案例：

html元素在CSS中分为两类：

1）块级元素:（一般都自带换行效果）

h1,p,table,form,img,ul,ol,div

直接可以设置宽高

2）行内元素:

a,font,b,i,u,span

不可以直接设置宽高，通过display属性设置元素以块状显示才能设置宽高

a:link{

color: #000000;

text-decoration: none;

background-color: #00FFFF;

display: block; /*以块状显示,宽高才有效果*/

width: 100px;

height: 40px;

}

注意：display与visibility（可见性）的区别：

display: none; 隐藏元素，且不占据页面位置

visibility: hidden; 元素不可见，但占据页面位置

overflow：当内容超出容器大小时的显示方式。常见值：visible（默认，可见）、hidden（隐藏

超出部分）、auto（自动添加滚动条）、scroll（显示滚动条）6.10 定位属性：

position：用于设置元素的定位方式，常见取值:static（默认）、absolute（绝对定位）、fixed（固定

定位）、relative（相对定位）、sticky（css3 新增，粘性定位）。在后面有案例详细介绍。

left/top或right/bottom：用于设置元素具体位置（相当于坐标）。

z-index：用于设置元素的层叠顺序。

7、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。一个完整

的页面可以看成由许多盒子组成，如图：

htmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtml

</div>

#d2{

border:1px solid red;

width: 100px;

height: 100px;

overflow: hidden;

}

position: absolute; /*绝对定位*/

left: 20px; /*离左边距离*/

top: 50px; /*离顶部距离*/

right:20px; /*离右边距离*/

bottom:20px; /*离底部距离*/

类)、中(主要部分)、右，这些版块就像一个个的盒子，这些"盒子"中放置着各种内容，页面就是由这

些"盒子"拼凑起来。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。如图所示：

说明：Margin(外边距) - 盒子离附近元素的外部距离，外边距是透明的。

Border(边框) - 盒子的边框。

Padding(内边距) - 内容与盒子边框的距离，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

在盒子模型中，整个元素的总宽度和总高度是这样计算的：

盒子的总宽度=width+左右边框+左右内补丁+左右外补丁

盒子的总高度=height+上下边框+上下内补丁+上下外补丁

8、DIV+CSS布局

用div元素来容纳页面的内容（DIV是最干净的盒子，不带特定格式），用css控制页面显示的格式。

案例：

HTML部分：

div {

width: 300px;

border: 5px solid green;

padding: 10px;

margin: 15px;

}

/*总宽度为:300 + 5 * 2 + 10 * 2 + 15 * 2 = 360px */

<body>

<h1>City Gallery</h1>

</div>

London<br>

Paris<br>

Tokyo<br>

</div>

<h1>London</h1>

<p>

London is the capital city of England. It is the most populous city in

the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

</p>

<p>

Standing on the River Thames, London has been a major settlement for two

millennia,

its history going back to its founding by the Romans, who named it

Londinium.

</p>

</div>

</div>

</body>CSS部分：

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left; /*向左浮动*/

padding:5px;

}

#section {

width:350px;

float:left; /*向左浮动*/

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both; /*清除两边的浮动对象*/

text-align:center;

padding:5px;

}

效果：

关键之处：

1、DIV浮动：如果不使用浮动，则块级元素默认是垂直排列，而改为行级元素又无法调整宽高和边距，

所以我们采用浮动，来使两个块级元素水平排列。CSS属性float控制浮动；属性clear清除浮动。2、元素的定位方式：

静态定位position:static;

默认值，不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素

在它原本的位置显示，即使加了top、left等也不起作用。

绝对定位

子容器相对于父容器的定位，如果没有父容器，则相对于body定位。

position:absolute;

相对定位

相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。

z-index:值越大越在上面

注意：z-index必须加在已经定位的元素上才起作用。

固定定位:也是相对定位，相对于窗口的position:fixed;

粘性定位：position：sticky

9、其它

9.1 字体图标

9.2 iframe浮动框架

posted @ 2024-02-29 08:25 一只菜喵程序媛阅读(25) 评论(0) 收藏举报

刷新页面返回顶部

一只菜喵程序媛

用0和1编织世界，用代码敲出浪漫

CSS基础（十三）

公告