合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

CSS学习笔记

  • 时间:2016-06-07
  • 发布:合肥web培训
  • 来源:达内新闻

合肥web培训专家聊一下CSS基础知识。

①-选择器:

1、子选择器:这行代码会使class名为food下的子元素li 加入红色实线边框。用于选择指定标签元素的第一代子元素

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

2、包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素.
与子选择器的区别在于:>作用于元素的第一代后代,空格作用于元素的所有后代。

例如下面代码,包含选择器会在food下的所有li标签加上1px的红色实线,不管是food下li标签中的li标签,只要是在food中的li。而子选择器只是作用于在food下的第一代li,如果是food下li标签中的li标签则不会被添加样式

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

3、伪类选择符:

a:link {color: #FF0000} / 未访问时的状态 /
a:visited {color: #00FF00} / 已访问过的状态 /
a:hover {color: #FF00FF} / 鼠标移动到链接上时的状态 /
a:active {color: #0000FF} / 鼠标按下去时的状态 (很少定义)/

4、分组选择符:当为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}

②-CSS文字排版:

1、使用css样式来改变文字的样式:粗体、斜体、下划线、删除线:

为P标签下的span设置粗体:p span{font-weight:bold}
为P标签下的span设置斜体:p span{font-style:italic;}
为P标签下的span设下划线:p span{text-decoration:underline;}
为class名为oldPrice的部分设置删除线:.oldPrice{text-decoration:line-through;}

2、其他:

文本缩进:p{text-indent:2em;}
设置字母与字母之间的间距:h1{letter-spacing:20px;}
设置英文单词之间的间距:h1{word-spacing:50px;}
行间距(行高):p{line-height:1.5em;}
块状元素中的文本、图片设置居中样式:h1{text-align:center}//中-左-右-:center-left-right

③-盒子模型:

1、元素分类:

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

将内联元素改为块状元素,例:a{display:block;}

块级元素特点:

one、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
two、元素的高度、宽度、行高以及顶和底边距都可设置。
three、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

将块状元素设为内联元素,例:div{display:inline;}

内联元素特点:

one、和其他元素都在一行上;
two、元素的高度、宽度及顶部和底部边距不可设置;
three、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的内联块状元素有:

<img>、<input>

同时具备内联元素、块状元素的特点,代码:a{display:inline-block;}

inline-block 元素特点:

one、和其他元素都在一行上;
two、元素的高度、宽度、行高以及顶和底边距都可设置。
上一篇:JavaScript学习笔记
下一篇:前端必备,CSS3的Flexbox布局方法

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省