CSS

层叠样式表,控制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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值