前端学习:css总结

 CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

 <html>

    <head>...</head>

    <body>...</body>

</html>

 

<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签

 

在<body>和</body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

 

css夹杂在<head>中。

对段落设置:

<style type="text/css">

p{

   font-size:12px;   文字大小

   color:red; 文字颜色

   font-weight:bold;  文字格式

border:1px solid red;  加入边框为1像素的红的边框

body{font-family:"宋体";} 设置字体

}

</style>

对个别文字设置:

<style type="text/css">

span{

   font-size:12px;   文字大小

   color:red; 文字颜色

   font-weight:bold;   文字格式

}

</style>

 

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里,下面这种写法是错误的:

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:

<p style="color:red;font-size:12px">这里文字是红色。</p>

 

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。

<link href="base.css" rel="stylesheet" type="text/css" />

rel="stylesheet" type="text/css" 是固定写法不可修改。

<link>标签位置一般写在<head>标签之内。

他们的优先级:内联式 > 嵌入式 > 外部式。

 

选择器

标签选择器其实就是html代码中的标签。

 

类选择器:

.类选器名称{css样式代码;}。在html代码中运用时在<标签后+空格+class=“类选择器名称”>如

.stress{

    color:red;

}

<span class="stress">勇气</span>

可以使用类选择器词列表方法为一个元素同时设置多个样式。

.stress{

    color:red;

}

.bigsize{

    font-size:25px;

}

<p>到了<span class="stress bigsize">

 

ID选择器:

和类选择器格式用法和格式差不多

1、为标签设置id="ID名称",而不是class="类名称"。·

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

ID选择器只能在文档中使用一次。

 

后代选择器:

.first  span{color:red;}               (Span就是first的后代元素)

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩</p>   (胆小如鼠变成红色。)

 

子选择器

.food>li{border:1px solid red;}

和后代选择器类似

子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择

 

伪类选择符

比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

a:hover{}

<a href="http://www.imooc.com">胆小如鼠</a> (胆小如鼠变色)

 

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

 

p{color:red!important;}

!important具有最高权值

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值