CSS样式设计(一)

  1. css的样式规则

    selector{property1: value1;property2: value2;…}
    其中selector是一个CSS的选择器,property为一个CSS的属性;
    例如:
    (1).标签为div的字体为红色,字体为16px:
    div{color: red;font-size: 16px}
    (2).id值为div的字体为红色,字体为16px:
    #div{color: red;font-size: 16px}
    (3)class值为div的字体为红色,字体为16px:
    .div{color: red;font-size: 16px}

  2. 在HTML文档中应用CSS
    1.内联样式:通过HTML标签style属性来设置标签的样式,例:

    <div style="color: red;font-size: 16px;">Hello World</div>
    

    2.内嵌样式:在HTML5文档的head标签体中增加一个style标签,将CSS设置集中在style的标签体中定义,例:

    <head>
    	<style>
    		div{
    			color: red;
    			font-size: 16px;
    		}
    	</style>
    </head>
    

    3.链接样式:将CSS样式定义在一个或多个以CSS为拓展名的外部样式文件中,使用link标签将外部样式表文件链接到HTML5页面中,这个在HTML5中是常见的样式应用,例:

    <link href="divcss.css" rel="stylesheet" />
    
  3. CSS选择器(重点)
    1.标签选择器:标签选择器指的是用HTML的标签名作为选择器,所有标签名都可以作为标签选择器使用,它用于为页面中某一种标签指定统一的CSS样式,但这也是缺点,不能实现同一种标签所设计的差异化。

    	div{color: red;font-size: 16px;}
    

    2.id选择器:id选择器使用"#"进行标识,后面紧跟HTML标签的id属性值,一张页面中的HTML标签的id属性值是唯一的,所以这种选择器设计的样式只能针对HTML页面中某一个具体的标签。

    	#divcss{color: red;font-size: 16px;}
    	
    	<div id="divcss">
    		CSS挺简单的?
    	</div>
    

    3.类选择器:类选择器使用". "进行标识,后面紧跟HTML标签中的class属性值。它最大的优势是可以为具有相同class属性的HTML标签设置相同的样式。

    	.classdiv{color: red;font-size: 16px;}	
    	<div class="classdiv">class相同</div>
    	<p class="classdiv">class相同</p>
    

    4.限定式选择器:限定式选择器由两个选择器构成,其中第一个为标签选择器,第二个为类选择器或id选择器,中间是没有空格的。

    div#divcss{....}    //为id属性为"divcss"的div标签设计样式
    p.classdiv{....}     //为class属性为"classdiv"的p标签设计样式
    

    5.后代选择器:后代选择器是用来选择HTML标签元素的后代的,其写法是把父标签的选择器写在前面,后代标签的选择器写在后面,两者之间有一个空格。

	div p{.....}    //为div标签中的p标签设计样式
	div #divcss{....}    //为div标签中的id属性为divcss的子标签设计样式
	p .classdiv{....}    //为p标签中class属性为classdiv的子标签设计样式

6.并集选择器:并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全或部分相同,就可以使用并集选择器为它们定义相同的CSS样式。

h1,p,div #divcss,.classdiv{....}    //h1,p标签,id属性为divcss的div标签,class属性为classdiv的标签

7.通配符选择器:通配符选择器用*号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的HTML标签元素。

8.其他选择器:对应特殊需求

选择器例子描述
element>elementdiv>p选择父元素为div标签的p标签(p标签必须是div标签的直接子元素)
element>elementdiv+p选择紧跟在div标签后面的p标签
element1~element2p~ul选择有相同的父元素中位于p元素之后的所有ul元素
[attribute]input[name]选择所有包含name属性的input标签
[attribute=value]input[name=“jiang”]选择name属性为"jiang"的input标签
[attribute^=value]input[name^=“ji”]选择name属性以"ji"开头的input标签
[attribute$=value]input[name$=“g”]选择name属性以"g"结尾的input标签
[attribute*=value]input[name*=“jiang”]选择name属性包含"jiang"的input标签
:linka:link选择所有未被访问的超链接
:visiteda:visited选择所有已被访问的超链接
:activea:active选择所有活动链接
:hoverdiv:hover选择鼠标悬停的div标签
:focusinput:focus选择所有获取焦点的input标签
:first-letterp:first-letter选择p段落中的首字母
:first-linep:first-line选择p段落中的首行
:first-childp:first-child选择属于父元素的第一个子元素的p标签
:last-childp:last-child选择属于父元素的最后一个子元素的p标签
:beforep:before{content: “测试” ;}在每个p标签的内容之前插入文字“测试”
:afterp:after{content: “测试” ;}在每个p标签的内容之后插入文字“测试”
:first-of-typediv p:first-of-type选择div标签中的第一个p标签
:last-of-typediv p:last-of-type选择div标签中的最后一个p标签
:nth-child(n)li:nth-child(2)选择属于其父元素的第二个li标签
:nth-last-child(n)li:nth-last-child(2)选择属于其父元素的倒数第二个li标签
:emptydiv:empty选择没有子元素的div标签
:notli:not(:last-child)选择除去最后一个li元素的其他所有li标签
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值