CSS

最新推荐文章于 2022-04-22 09:58:34 发布

原创最新推荐文章于 2022-04-22 09:58:34 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

node.js 专栏收录该内容

14 篇文章

订阅专栏

层叠样式表，控制HTML的布局和样式

使用方式

三种使用方式

内联样式：在标签内使用属性stype
页内样式：在<head>标签中使用<stype type=“text/css”><stype>
外部样式：使用CSS文件，使用<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
优先级从高到低

基本语法

selector {property1: value1,… ,propertyN:valueN
# 将链接标签文字颜色变成红色且有横线穿过
a {color:red; text-decoration:line-through}

颜色写法

p {color:#ff0000;} /*大小写无所谓*/
p {color:#f00;}/*FF0000的缩写*/
p{color:rgb(255,0,0);}/*三原色表示,0-255*/

选择器

标签选择器

body { text-align:center}

上例直接使用HTML标签的选择器，就是标签选择器，元素选择器
注意，如果将标签改为*，表示统配所有HTML标签

id选择器
id指的是HTML标签内的属性id

#menu{
		background-color: rgb(255,255,255);
		width:80%;
		border-bottom:#f0f0f0 solid 1px;
		margin:opx 0px 5px 0px

类选择器
类，指的是标签中的class属性

<div class="main center">
.center{
	width:80%;
	margin:auto
	}

选择器分组
分组的选择就可以使用同样的样式声明


h1,h2,h3{
	color:green
	}

层次选择器

后代选择器

div li {
	display: inline
	}

所有div标签下任意层的li标签

div#menu li{
	display:inline
}

子选择器

ul >li {
	display:inline
	}

所有div标签下直接的子元素li标签

div#menu ul>li{
	display:inline
	}

相邻兄弟选择器

div.detail p+p{
	color:green
	}

class 为detail的div标签下任意层下的近邻P的标签的下一个p标签
伪类pseudo-classes
伪类能增加样式，类似于class
锚伪类，链接标签a的四种状态

a:link {color:red} /*未访问的链接*/
a:visited {color:green} /*已访问的链接*/
a:hover {color:blue} /*鼠标移动到链接上*/
a:active {color:black} /*选定的链接*/

伪类可以和css类配合使用

a.red:visited {color:#FF0000}
a:hover{ color:red}
a{color :chartreuse; text-decoration-line:none}
<a class="red",href="css_syntax.asp">css Syntax</a>

伪元素
伪元素能增加元素
:before和:after可以在元素前后插入内容

#homepage:after{
	content:url(1.png)
	}
	a:before{
		content:"something:
		}

属性装饰器


E[attr]{sRules}	具有某属性
E[attr=value]{sRules}	具有某属性且等于value
E[attr~=value]{sRules}	具有某属性且属性值中的一个是value
E[attr\|=value]{sRules}	具有某属性且属性值使用了-，且-之前的部分是value的才匹配,*[class]="main"能和<div class=‘main-center’>减号之前的部分匹配

链接具有href属性
a[href]{
	coror:blue;
	text-decoration:line-through
	}
图片alt属性为text
img[alt=text]{
	height:20px
	}
* [class="main center"]{
	color:black
	}
*[class~="center"]{
	color:black
	}

继承

body{
 	text-align:center;
 	color=red
 	｝

观察整个页面文字颜色，几乎后变成了红色
页面中父元素中使用的形式，通过css继承，子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性。

常见样式

背景background复合属性：http://www.w3school.com.cn/css/css_background.asp
字体font复合属性：http://www.w3school.com.cn/css/css_font.asp