课程咨询 :0551-64632511 QQ:2146233496

合肥web前端培训

合肥web培训 > 达内新闻 > CSS学习笔记
  • CSS学习笔记

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

  • 合肥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零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56