html&css学习笔记

最新推荐文章于 2024-05-06 17:11:44 发布

张良怀

最新推荐文章于 2024-05-06 17:11:44 发布

阅读量614

点赞数

分类专栏： web前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/shadow19930518/article/details/20239665

版权

web前端学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2014/3/1(css)：
1.多层div内的h3这个selector的获取：

div div div h3{
color:red;
}

2.” * “可以对所有的selector都起作用：

*{
    border:2px solid #3a5fcd;     /*对整个网页中的所有selector都进行了边界设置：框线条2px，实线，颜色为16进制颜色#3a5fcd */
    }

3.">"符号获取直接子孩子

body > p{
    font-weight:bold;     /*将body下的直接的p内的文字改成bold属性*/
    }

4.常用参数总结：
font-family
font-size
font-weight
width
height
color
background-color
border
border-radius：边框圆角半径

margin：整个selector相对于整个界面的布局设定，边距

margin-left

margin-right

text-align

text-decoration

position

5.class和id的使用
设有class="class_name"的一类elements可以单独在css中设置各种属性
通过：

.class_name{
font-size=24px;
...
}

设有id="id_name"的某个element可以在css中单独设置一些属性
通过：

#id_name{
color:blue;
.....
}

6.pseudo-class selectors

(1)for link:

a:link:未访问过的网址的特效设定

a:visited:访问过的网址的特效设定

a:hover:鼠标停留在link上时产生的特效设定

(2)child的选择：

当一个父类element下面有多个相同的element，即children并列，则通过first-child和nth-child(n)去选择哪一个。

例如div下游多个相同的p，则通过下列代码选择：

p:first-child{     /*选择第一个段落p*/
    font-family:cursive;
    }
p:nth-child(2){    /*选择第二个段落p*/
    font-family:Tahoma;
    }
p:nth-child(3){    /*选择第三个段落p*/
    color:#cc0000;
    }
p:nth-child(4){
    background-color:#00ff00;
    }
p:nth-child(5){
    font-size:22px;
    }

7.使用class和id进行分类和特殊管理（注意其优先级：class内的设置能够覆盖一般设置，id的设置又能覆盖class的设置）

例子：

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
	   <div class="friend" id="best_friend">jack</div>
	   <div class="family">tom</div>
	   <div class="enemy" id="archnemesis">bill</div>
	</body>
</html>

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height:100px;
	width:100px;
	border-radius:100%;
	border:2px solid black;
	text-align:center;
}
.friend{
    border:2px dashed #008000;
    }
.family{
    border:2px dashed #0000ff;
    }
.enemy{
    border:2px dashed #ff0000;      /*覆盖了在div{}中进行的统一设定*/
    }
#best_friend{
    border:4px solid #00c957;
    }
#archnemesis{
    border:4px solid #cc0000;       /*覆盖了在.enmey{}中的设定*/
    }

最终边界border的设定以id内的设置为准。

张良怀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html&css学习笔记

2014/3/1(css)：1.多层div内的h3这个selector的获取：div div div h3{color:red;}2.” * “可以对所有的selector都起作用：*{ border:2px solid #3a5fcd; /*对整个网页中的所有selector都进行了边界设置：框线条2px，实线，颜色为16进制颜色#3a5fcd
复制链接

扫一扫