css 基础

最新推荐文章于 2023-08-18 20:40:23 发布

BusyMonkey

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量716

点赞数 1

分类专栏： Web 文章标签： css html

本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/50400981

版权

Web 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

<html>
<head>
<link href="my.css" type="text/css" rel="stylesheet" />
</head>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
</html>

.style1{
 width:300px;
 height:200px;
 border:1px solid red;
 margin:50px 0px 0px 200px;
}

/*父子选择器*/
.style1 table {
 border:1px solid black;
 width:298px;
 height:180px;
}

.style1 table td {
 border:1px solid black;
}

以上是记事本下开发的简单 table。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个网页</title>

<style type="text/css">/*内嵌式css*/
 .style1 {
 	font-size: 20px;
 	color: red;
 	font-style: normal;
 	font-weight: bold;
 	text-decoration: underline;
 }
 a:link img {
  	opacity:0.4;/*透明*/
	filter:alpha(opacity=40);
 
	-webkit-filter: grayscale(100%);/*灰色*/
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
 }
 a:hover img {
  	opacity:1;/*透明*/
	filter:alpha(opacity=100);
 
 	-webkit-filter: grayscale(0);/*彩色*/
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    filter: gray;
 }
</style>

</head>
<body>
<a href="#"><img src="images/test.jpg" width=170px border=3px /></a><br/>/*用超链接实现鼠标悬停改变效果*/
<span class="style1">第一个栏目</span><br/>
<span class="style1">第二个栏目</span><br/>
<span class="style1">第三个栏目</span><br/>
<span class="style1">第四个栏目</span><br/>
</body>
</html>

三种选择器：

* ：通用选择器

A 代表：标签选择器，标签名称为 A 的元素

#A 代表：id选择器，id 属性值为 A 的元素

.A 代表：类选择器，class 属性（脚本访问时此属性名为 className）值包括 A（当然，你知道的，多个值用空格分隔）的元素

优先级：#A > .A > A

css里，id选择器可以无限次数使用，并且可以写一样的。

你在网上听别人说不能多次使用，应该是出现2个以上同名的id选择器吧。

例如都是id="div1"

1 2	<div id="div1"></div> <div id="div1"></div>

其实这样写，在css里是可以的。但如果页面涉及到js，就不好了。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。

最后，成熟网站里，你很少看到css里用id选择器的，都是用class，id选择器留给写js的人用，这样避免冲突。

2、链接样式

a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

3、列表样式（无序、有序）

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

4、盒子模型

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

5、组合选择器

后代选择器，以下实例选取所有 <p> 元素插入到 <div> 元素中，给div里面的子元素p元素给添加的样式，p元素可以是div下面的子元素的子元素，只要是子元素就行，不管多少级子元素：

div p
{
background-color:yellow;
}

子元素选择器，以下实例选择了<div>元素中所有直接子元素 <p> ，必须要第一级子元素：

div>p
{
background-color:yellow;
}

相邻兄弟选择器，以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
background-color:yellow;
}

普通相邻兄弟选择器

div~p
{
background-color:yellow;
}

6、分组和嵌套

h1,h2,p
{
color:green;
}

为所有p元素指定一个样式
为所有class="marked"的元素指定一个样式
为所有class="marked"元素内的p元素指定一个样式

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

下面的图片说明了盒子模型(Box Model)：

CSS box-model

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

BusyMonkey

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录