HTML新手入门(三)——CSS初步

目录

 

CSS入门(一)

    样式表类型

        内联样式

        内嵌样式

        外部样式

    选择器

    常用属性

        1.background

        2.font*

        3.text*

        4.color*

        5.line-height

        6.border*

        7.margin*

        8.padding*

        其他样式属性


CSS入门(一)


    样式表类型


        内联样式


            当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性



        内嵌样式


            当单个文件需要特别样式时,就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表



        外部样式


            把已有的内嵌样式表代码(不含<style>和</style>)剪切到新建的文本文件中,保存文件到HTML文档同一文件夹下(文件名叫test.css),在head标签内添加link标签:


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



    选择器


        1.元素选择器
            可以使用标签名来选出指定名称的元素(标签),如:p、div、img、a等,甚至还包括 html 标签。
            特别的选择符  “*” ,它可以代表任意标签
            若需要将整个网页中所有的文字字号设置为12px,那可以写成: * { font-size : 12px; }



        2.id选择器
            我们可以为标签指定一个ID,如:<p id=”p1”></p>,这样在内联样式表或外联样式表中即可使用 #p1 选中该元素



        3.类选择器
            我们可以把HTML标签分为多个类别(类名自己定义),然后在标签中使用class属性说明该标签属于哪个分类
            注意样式表中,类名最前面有个句点”.”
            一个 class 属性中可以有多个样式类名, 使用空格分隔即可, 如: class="classA classB"



        4.伪类选择器
            对于诸如超链接 <a> 这样的标签,根据状态不同,它可能显示不同的显示外观。例如下面4个图分别是超链接处于普通链接状态(link)、鼠标处于其上方(hover)、鼠标按住(active)和已访问过(visited)4个不同状态
            a:link { color : black; text-decoration:none;}
            a:hover { color : red; text-decoration:underline;}
            a:active { color : green; }
            a:visited { color : blue; }



        5.属性选择器
            根据元素标签中的属性来进行选择

样式表:
a[title]{ color: red;}
a[href="http://www.cctv.com"]{color: green;}
a[href="http://www.cctv.com"][title="cctv"]{color: blue;}

HTML:
<a href="http://www.163.com" title="163">超链接1</a>
<a href="http://www.cctv.com">超链接2</a>
<a href="http://www.cctv.com" title="中央电视台">超链接3</a>
<a href="http://www.cctv.com" title="cctv">超链接4</a>

结果:
超链接1为红色,超链接2、3为绿色,超链接4为蓝色

    注意:
        1. 若”[ ]”中只有属性名(如第1行)则表示元素存在该属性即匹配;
        2. ”[ ]”中既有属性名,又有值(如第2行),则表示元素必须存在该属性,且值为指定值。;
        3.   若有多个”[]”,表示多个属性选择必须同时匹配



        6.组合选择器
            前述几种基本选择符还可以组合使用,根据组合形式不同,表示不同的选择方式
            (1) 直接结合:例如: p.classA表示选择<p>标签中 class="classA" 的元素。
            (2) 逗号分隔:表示并列关系。例如: p, span 表示选择 <p> 和 <span>
            (3) 空格分隔:表示选择后代。例如: p span 表示选择 <p> 的后代中的 <span>
            (4) “>”分隔:表示选择 “直接儿子”。例如:p > span 表示选择 <p> 的直接儿子中的 <span>
            (5) “+”分隔:表示选择相邻的兄弟元素。例如:p + span表示选择 <p> 的兄弟元素中其后紧邻的 <span>。

#样式表HTML
1p.classA {color : red;}<p>段落1</p>
<span>标签</span>
<p class=”classA”>段落1</p>
2p, span {color : red;}<p>段落</p>
<span>标签</span>
<div>DIV里的文字</div>
3p span {color : red;}<span>标签</span>
<p><span>标签</span></p>
<p><a><span>标签</span></a></p>
4p > span {color : red;}<span>标签</span>
<p><span>标签</span></p>
<p><a><span>标签</span></a></p>
5li + li {color : red;}<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ul>

 



    常用属性


        1.background


            background-color : red;
                背景为红色,支持多种颜色表示法, 如RGB表示法:#FF0000或#F00
            background-image : url(“bg.jpg”);
                设置背景图片为bg.jpg(相对路径表示) 设置了背景图,背景色就看不到了,除非背景图片失效
            background-repeat : repeat-x;
                背景图只在X方向(水平方向)上重复,还有其它值 ( repeat-y, no-repeat )
            background-attachment : fixed;
                背景图固定,不随滚动条滚动
            background-position : 5px 10px;
                设置背景图相对于元素左上角向右偏移5px, 向下偏移10px。可取负值。



        2.font*


            font-size : 12px;
                设置文字大小为12像素 (请查阅其它资料了解其它单位)
            font-family : 宋体;
                设置文字字体为”宋体”。应避免使用非主流字体,原因此处暂略,请自行思考
            font-weight : bold;
                文字加粗



        3.text*


            text-align : center;
                文字水平居中
            text-decoration : underline;
                文字加下划线
            text-indent : 24px;
                首行缩进24像素



        4.color*


            color : red;
                文字为红色,支持多种颜色表示法, 如RGB表示法:#FF0000或#F00



        5.line-height


            line-height : 24px;
                每行文字的行高为24像素



        6.border*


            以 border 开头的这一组修饰元素的边框。 边框分上、右、下、左四个方向,每个方向的边框可分别修饰”型”、”色”、”宽”。

 样式含义
border-left-color: red;
border-left-style: solid;
border-left-width:2px;
 设置元素左边框为2px宽的红色, 实线边框
 border-left : 2px solid red; 设置元素左边框为2像素宽的红色实线边 (上例的简写形式)
border : 1px dotted red; 设置元素四周边框为1px宽的红色虚线边
 border-width : 2px 5px 10px 15px; border : 1px solid red; 四周边框均为红色实线边,上、右、下、左边框宽度分别为2px、5px、10px、15px


小结:
        (1) 第2行的代码覆盖了第1行中关于宽度的说明
        (2) 四个方向的边框可属性可一起简写说明,中间以空格分隔,顺序为从”上”开始顺时针方向一周

border : 1px solid red;
border-width : 5px 10px;
四周边框均为红色实线边,上下边为5px宽,左右边为10px.
border : 1px solid red;
border-width : 5px 10px 15px;
 等同于 border-width : 5px 10px 15px 10px;

 



        7.margin*


            margin指的是元素边框之外的空白



        8.padding*


            padding则指元素边框之内与内容之间的空白。



        其他样式属性

 

width:50px;
height:100px;
定义元素宽50px,高100px
cursor: pointer;    鼠标处于元素上方时显示为手指形状,类似处于超链接上方的效果
displaydisplay: block; 设置元素以块标签方式显示
display: inline; 元素以行内标签方式显示
display: none;  隐藏元素。
visibility: hidden;

隐藏元素

与display: none的区别在于:
        使用visibility: hidden隐藏元素后元素原来占据的空间仍然保留,相邻元素并不侵占若原有空间。而display: none将元素隐藏后,原来占据的空间不再保留

 position: absolute; 设置元素的定位方式为绝对定位。
left:50px;         设置元素左外边距边界与其父容器左边界之间的偏移为50px left、top、right、bottom 4个属性的效果与position属性的取值有很大关系
  z-index:999;设置元素的叠放层次,z-index值越大,就越靠上层。
 float:left;    元素向左浮动
clear:both;清除浮动效果, 
overflow:scroll;若元素中的内容超出了元素本身的大小,则显示滚动条。

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洺丶T

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值