CSS
来源:互联网 发布:淘宝国棉一厂 编辑:程序博客网 时间:2024/06/06 01:12
2017.10.29
css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:12px;color:red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:12px;
color:red;
} /*注释语句*/
内联式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样式代码写在
<styletype="text/css"></style>
标签之间。如下面代码实现把三个<span>
标签中的文字设置为红色:<style type="text/css"> span{ color:red; }
</style>
嵌入式css样式必须写在<style></style>
之间,并且一般情况下嵌入式css样式写在<head></head>
之间。如右边编辑器中的代码。外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在
<head>
内(不是在<style>
标签内)使用<link>
标签将css样式文件链接到HTML文件内,如下面代码:<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。
3、<link>
标签位置一般写在<head>
标签之内。
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>
代码在<style type="text/css">...</style>
代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是–就近原则(离被设置元素越近优先级别越高)。
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
.类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下: <span>
胆小如鼠</span>
第二步:使用class=”类选择器名称”为标签设置一个类,如下: <span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下: .stress{color:red;}/*类前面要加入一个英文圆点*/
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id=”ID名称”,而不是class=”类名称”。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
类和ID选择器的区别
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
.stress{ color:red;}.bigsize{ font-size:25px;}<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。
请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
注意:!important要写在分号的前面
p{color:green;}<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>```2017.10.31body{font-family:"Microsoft Yahei";}body{font-size:12px;color:#666}p span{font-weight:bold;}粗体p a{font-style:italic;}斜体p a{text-decoration:underline;}下划线 .oldPrice{text-decoration:line-through;} 删除线p{text-indent:2em;}首行缩进**注意:2em的意思就是文字的2倍大小。**p{line-height:1.5em;}行间距1.5倍文字间隔或者字母间隔letter-spacing 来实现h1{ letter-spacing:50px;}<h1>了不起的盖茨比</h1>h1{ word-spacing:50px;}...<h1>welcome to imooc!</h1>```常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有:<img>、<input>```块级元素霸占整行,默认width:0px,且自带换行效果。内联元素的大小默认根据内容改变,无内容则不占页面空间,也就是width:auto,不自带换行效果,但源代码换行会在页面显示为空格。内联块状元素默认大小根据内容改变,无内容也占部分页面空间,默认大小不同一,不自带换行效果。2017.11.1a{display:block;}块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。<div class="se-preview-section-delimiter"></div>```div{ display:inline; }
……
<div>我要变成内联元素</div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
display:inline-block
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
**1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。**
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- mysql Access denied for user root@localhost错误解决方法总结 原创 2016年07月06日 17:00:40 41843 问题重现(以下讨论范围仅限Windo
- VMware中CENTOS7中NAT设置连网,以及NAT服务自动终止
- Ubuntu16.04 hadoop2.7.3 伪分布配置
- IOS 去掉红点
- solr部署到tomcat
- CSS
- arm32和arm64常用指令B BL BLX机器码计算
- 【Python】Python脚本实现抢券
- Centos7.3安装Ambari2.4.2+HDP2.5.3搭建Hadoop集群
- 求数组的全排列
- 我的第三篇博客
- 2017.10.28闵神讲课DAY1
- 集成算法与泰坦尼克
- VC++6.0完美支持xp,win7,win8,win10