黑马程序员_CSS篇

最新推荐文章于 2022-07-05 13:05:44 发布

尛马过河

最新推荐文章于 2022-07-05 13:05:44 发布

阅读量1k

点赞数

文章标签： CSS 网站网页 Web

本文链接：https://blog.csdn.net/wahaha_hehongwei/article/details/8703844

版权

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

一、CSS认识

1.CSS作用：决定网页内容的Layout

2.CSS优点：制作和管理网页方便、更加精细控制网页的内容形式、样式丰富多彩、样式灵活多样

3.CSS按其位置分为三种：

(1)内嵌样式，写在Tag里面，只对所在的Tag有效

例：<p style="text-align:center"> </tag>

(2)内部样式表，写在<head></head>里面，只对所在网页有效

例：<style type="text/css">

p{ext-align:center;font-size:20px} 增加了p的表现形式

p.center{text-align:center} 应用于单个标签

.right{text-align:right} 应用于多个标签

……

</style>

(3)外部样式表，把样式写在一个以.css为后缀的文件里，然后在<head></head>里面引用这个CSS文件

例：<link rel=stylesheet type=text/css href=slstyle.css>

4.样式优先级是顺序为（从高到低）：内嵌样式表、内部样式表、外部样式表、浏览器缺省

二、语法与用法

1.CSS结构：selector

{

[property1: value1;]

[property2: value2;]

Property3: value3

}

2.基本选择器

（1）标签选择器

p{text-align:center;font-size:20px}

使用： <head>

p{text-align:center;font-size:20px}

</style>

</head>

<body>

<p>标签选择器</p>

</body>

（2）类选择器

p.center{text-align:center} 应用于单个标签

.right{text-align:right} 应用于多个标签

使用： <head>

p.center{text-align:center}

.right{text-align:right}

</style>

</head>

<body>

</body>

（3）ID选择器

#one{text-align:center} 只能在HTML中使用一次，主要针对某一块，针对性强

使用： <head>

#one{text-align:center}

</style>

</head>

<body>

<p id="one">ID选择器，居中</p>

</body>

三、CSS设置文本样式

例：.s1{font-family:Arial} 字体类型

属性	值例子	说明
font-family:	"宋体"	字体
font-size:	18px	字号
font-tyle:	italic	文字倾斜效果
font-weight:	bold	文字加粗
font-variant:	small-caps	字体变体
letter-spacing:	10px	调整字母间距
word-spacing:	3px	调整单词间距
text-decoration:	underline	添加文字修饰
text-align:	left	设置文本排列方式
text-indent	4px	设置段落缩进
line-height	250%	调整行高
text-transform	lowercase	转换英文大小写
vertical-align	sub	垂直对齐属性

四、CSS+DIV布局方法

1.基本理念：<div id="left">container</div>

div设置这个container为一种整体块，id控制这个整体的表现形式

#left

{

background-color:#FF99FF

border:2px solid #003399

……

}

例：<div id="container">container

<div id="banner">banner</div>

<div id="right">right</div>

<div id="footer">footer</div>

</div>

通过id的属性来控制这个div所在的位置和样式等，达到布局、美化等的目的

尛马过河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员_CSS篇

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------一、CSS认识1.CSS作用：决定网页内容的Layout2.CSS优点：制作和管理网页方便、更加精细控制网页的内容形式、样式丰富多彩、样式灵活多样3.CSS按其位置分为三种：(1)内嵌样式，写在Tag里面，只对所在的Tag有效例： (2)内部样式表，写在里面，只对所在
复制链接

扫一扫