HTML+CSS入门 CSS样式-职坐标

HTML+CSS入门 CSS样式

沉沙 2018-09-18 来源：阅读 769 评论 0

摘要：本篇教程介绍了HTML+CSS入门 CSS样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

　css（Csacading Style Sheet）级联样式表，是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。也就是说，css的作用基本有两个：1.将样式定义从html中独立出来，更方便地设置样式；2.给标记的对象(html元素)设置样式，所以必须要先有对象。

　　语法: Selector {property: value}
一、引入方式
　　1.外链引用(Linking to a Style Sheet)

　　写在<head>头部标签内即可。href属性指向本地(或服务器)的静态资源路径。

　　type="text/css"是允许不支持这类型的浏览器忽略样式表单。

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

　　2.内部定义(Embedding a Style Block)

　　在<head>头部标签内定义<style>标签，并将样式写在style内部。
复制代码

<style type="text/css">
    #father p.c2{
        color:black;
    }
    #father #son{
        color:blue;
    }
</style>

复制代码
　　3.内联定义(Inline Styles)

　　在对象的标记内使用对象的style属性定义适用其的样式表属性。

<p style="margin-left; 0.5in; margin-right:0.5in">这一行被增加了左右额外补丁</p>

二、特性
　　1.层叠性

　　在权重相同的情况下，在同一个标签中样式发生冲突，后面定义样式会将前面定义的样式给覆盖掉。
　　2.继承性

　　在默认情况下，如果子元素没有设置样式，那么该子元素会受父元素的样式影响。CSS继承性只能发生在标签嵌套结构中。
　　可继承的属性：

　　　　- color 可以被继承

　　　　- font-size 可以被继承 

　　　　- 与font属性相关的属性都可以被继承

　　　　- 行高（line-height）可以被继承 

　　　　- text-align 可以被继承
　　继承性中特殊标签：

　　　　- a标签不能直接受父元素中的文字颜色影响

            - 标题标签不能直接受父元素中的文字大小影响
三、选择器及其权重
　　1.选择器

　　选择器用于选择标记对象，以便给其赋予样式。选择器分为以下几种选择器。
　　通配符(Universal Selector)

　　语法:  *{sRules}

　　必写的选择器，用于给所有DOM对象设置共有的样式。

*{
    margin: 0;
    padding: 0;
}

　　标签选择器(Type Selectors)

　　语法:  E{sRules}

　　必写的选择器，选择某一类标签元素(Element)设置样式。

a {
    text-decoration: none;
}

　　通配符+类型选择器一般用于初始化整个DOM的样式。
　　类选择器(Class Selectors)

　　语法: .className{SRules}

　　最常用的选择器，选择某一类class属性值相同的对象设置样式。

.nav{
    background-color: pink;
    height: 50px;
    width: 50px;
}

<div  class="nav">
　　...
</div>

　　ID选择器(ID Selectors)

　　语法:  #ID {sRules}

　　特殊对待某个标签元素的选择器，选择具有唯一标识符id的元素作为操作对象。

#nav{
    background-color: pink;
    height: 50px;
    width: 50px;
}

<div  id="nav">
　　...
</div>

　　组合选器

　　- 包含选择器(Descendant Selectors):

　　　　多个选择器可以同时写在一行并用空格符隔开，等价于选择同时符合这些选择器的元素对象。

　　　　语法 E1 E2 {sRules}

　　- 选择器分组(Grouping)

　　　　多个选择器用"，"号隔开，等价于选择只要满足某个选择器的所有元素对象。

　　　　语法 E1, E2 {sRules}

　　- 属性选择器(Attribute Selectors)

　　　　在已有选择器的基础上，根据某个属性进行再次过滤选择对象元素。

　　　　语法 E1[Attribute=value] {sRules}

　　- 子对象选择器(Child Seletors)

　　　　在已有选择器的基础上，根据某个子对象再次过滤选择器元素对象。

　　　　语法 E1 > E2 {sRules}
　　扩展的选择器

　　伪类(Pseudo-Classes)和伪元素(Pseudo-Elements):于设置特定事件触发的特殊效果，如鼠标悬浮时变色等。

　　常见的伪类:
属性描述 CSS
:active  向被激活的元素添加样式。  1
:focus  向拥有键盘输入焦点的元素添加样式。  2
:hover  当鼠标悬浮在元素上方时，向元素添加样式。  1
:link  向未被访问的链接添加样式。  1
:visited  向已被访问的链接添加样式。  1
:first-child  向元素的第一个子元素添加样式。  2
:lang  向带有指定 lang 属性的元素添加样式。  2

　　常见的伪元素:
属性描述 CSS
:first-letter  向文本的第一个字母添加特殊样式。  1
:first-line  向文本的首行添加特殊样式。  1
:before  在元素之前添加内容。  2
:after  在元素之后添加内容。  2

　　简单记忆：四种基础选择器，四种组合选择器，伪类及伪元素。
　　2.权重计算

　　下表为权重计算表，数值只代表等级而不是真实值。
选择器  权重
继承  0
通配符  1
标签选择器  10
类选择器  100
id选择器  1000
行内样式  10000
!important  100000

　　由于选择器具有优先级，所以选择器连写时最好从大到小写。
　　3.选择器练习
　　练习一：选择元素并设置样式
选择器设置样式
　　练习二：jquery操作选择器
jquery选择器练习

　　选择器是沟通html元素、css样式以及js事件的桥梁。
四、属性
　　1.字体

　　- font: font-style || font-variant || font-weight || font-size || line-height || font-family 设置字体是否倾斜、粗细、大小、行高和字体风格等。

　　- letter-spacing: 设置文字之间的间隔，该间隔数值作用到每个文字或英文字母(不包括最后一个)之后。

　　- word-spacing: 设置英文单词之间的间隔，该间隔数值作用到每个英文单词之后，对汉字无效。
　　2.文本

　　- color: 设置文本颜色

　　- line-height: 设置行高。行高=文字大小+上下间距，默认行高18px；行高作用：设置文字垂直居中；影响行高的因素：文字大小和文字字体可以改变行高。
　　- text-align: 设置文本相对于盒子的水平对齐方式: left | right | center | justify。

　　- text-decoration: 设置文本是否带有下划线、上划线、贯穿线。没有文本的对象此属性不会作用。

　　- text-indent: 设置文本缩进。根据direction确定缩进方向。

　　- text-overflow: 设置文本溢出时的省略标记。需要和white-space、overflow配合使用。

　　- white-space: 设置为本是否换行等。

　　- direction: 设置文本流向。默认从左到右，此时text-indent是左侧缩进；设置direction: rtl时，文本流从右向左，此时text-indent是右侧缩进。

　　练习:
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            word-spacing: 2px;
            background-color: #1a5d7e;
            direction: rtl;
            text-indent: 50px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div><i>begin</i> this is some words.this is some words.this is some words.this is some words. <i>end</i></div>
</body>
</html>

复制代码
　　3.背景

　　- background: backgroud-color || background-image || background-repeat || background-attachment || background-positon 设置背景颜色(或图片)、重复排列、位置等。

　　- background-image: url(相对路径|绝对路径|服务器接口url): 设置背景图片。

　　- background-attachment: scroll | fixed 设置背景图像随对象滚动或者固定。

　　- background-repeat: repeat | no-repeat | repeat-x | repeat-y 设置背景图像平铺方式

　　- background-position: 设置背景图片左上角相对于对象左上角的位置。需要先指定background-image属性。

　　练习: https://files.cnblogs.com/files/kuaizifeng/lol.zip
复制代码

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
body{
    background:url(index-bg-v14.jpg) no-repeat top center;
    }
.box{
    width:1000px;
    height:464px;
    background:url(top.jpg) no-repeat;
    margin: 0 auto;
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

复制代码
　　4.边框

　　border: border-width || border-style || border-color 设置边框的宽度、线条样式和线条颜色

　　边框和内外补丁一样，有以下属性连写风格：

　　　　- 如果提供全部四个参数值，将按上－右－下－左的顺时针序作用于四个边框。

　　　　- 如果只提供一个，将用于全部的四条边。

　　　　- 如果提供两个，第一个用于上－下，第二个用于左－右。

　　　　- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
　　5.内外补丁

　　padding: auto | length 设置内补丁边距，相对border以里。

　　margin: auto | length 设置外补丁，相对border以外。

　　内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
　　6.列表

　　list-style: list-style-image || list-style-postion || list-style-type 设置列表的有关属性。

　　list-style-image: 设置li等对象的预设标记的背景图片。

　　list-style-type: 设置li等对象的预设标记符号，当list-style-image未设置时，该属性发生作用。

　　list-style-postion: 设置li等对象的预设标记位于文本之内或之外。
　　7.表格

　　border-collapse: separate | collapse 设置表格内单元格边框是否合并。

　　border-spacding: length || length 当border-collapse是separate时，设置行和单元格的边框在航线和纵向上的间距。
五、元素特性

　　html元素大致分为三类：
　　1.块元素：

　　包括: div, p,ul,ol,dl,li,dd,dt,h1...h6....

　　其特性为:

　　- 块元素独占一行显示，即块元素默认在尾部添加了换行符。

　　- 块元素默认宽度与父元素宽度一致，即块元素会继承父元素的宽度。

　　- 块元素可以设置宽度和高度，也可以不设置并由内容撑开。
　　2.行内(内联)元素

　　包括: span，a，font，trong，i，s....

　　其特性为:

　　- 行内元素在一行上排列显示。

　　- 行内元素不能设置宽度和高度，其宽度和高度只能由内容撑开。
　　3.行内块元素

　　包括: img, input ...

　　其特性为:

　　- 行内块元素在一行内排列显示。

　　- 行内块元素可以设置宽度和高度。
　　4.元素特征转换

　　行内元素需要整齐排列，就要求对其宽高可以主动设置。因此转换思路有两种：转换为行内块元素和脱标。

　　- 转换为行内块元素：display，可以设置宽高，不脱标，保证元素在行内的原有位置。

　　- 脱标: float，可以设置宽高，无法保证元素在行内的原有位置，并且会覆盖标准流中的元素。因此对行内元素要一起脱标(解决覆盖问题)，同时通过margin或padding来设置元素的位置(解决位置移动文职)。

　　- 脱标: position，可以设置宽高，但侧重于移动元素的位置，满足特定需求。
六、盒子模型
　　1.盒子大小

　　元素在浏览器中的大小由margin、border、padding、content四个部分构成。即:

　　对象的高度为: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

　　对象的宽度为: margin-left + border-left + padding-left + width + paddding-right + border-right + margin-righ
盒子模型

　　padding不能改变盒子的位置(大小)，但可以改变内容在盒子内部的位置；

　　margin不能改变内容在盒子内部的位置，但可以改变盒子的位置。border可以改变盒子的位置。
　　2.塌陷问题

　　- margin的垂直嵌套塌陷：父元素内部的子元素设置margin时，会造成子元素margin被“转移”到父元素上面。解决办法，设置border边界样式或者设置padding或者设置overflow: hidden。
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.outer{
            height: 250px;
            width: 250px;
            background-color: red;
            /*overflow: hidden;*/
            /*border: 1px solid;*/
　　　　　　　/*padding: 1px*/

        }
        div.inner{
            height: 50px;
            width: 50px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div class="outer">
       <div class="inner">
       </div>
   </div>
</body>
</html>

复制代码

　　- margin的垂直并列塌陷：两个垂直并排的元素在交界处设置margin时，其垂直距离不是margin加和，而是以大的margin值为准。解决办法：在交界处只给一个元素设置margin。
　　3.盒子居中

　　标准流的盒子居中显示：margin: 0 auto;

　　绝对定位的盒子居中显示：left: 50%(父元素宽度一半)，且margin-left：-元素自己宽度一半。
七、浮动

　　float: none | left | right
　　1.特性

　　- 脱标: 元素浮动以后会完全脱离文档流，浮动的元素不占位置。

　　- 贴边: 浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动并会产生贴边现象。

　　- 覆盖: 如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素，否则会覆盖。

　　- 排列: 浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐。

　　- 文字环绕：浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。
　　2.浮动元素的特点

　　- 脱标。

　　- 不会独占一行，宽度和高度被内容撑开, 宽度和高度可以设置。
　　3.作用

　　- 网页布局规则排列多个相同大小的盒子，如导航栏等。　　

　　- 文字环绕早期用于制作文字环绕效果。
　　4.清除浮动

　　- 场景：当三个子元素都设置了宽和高以及float时，父元素不设置高度，会造成父元素下面的元素往上移动并被三个子元素覆盖。其实是子元素脱标，父元素没有设置宽高，造成了压盖现象。

　　- 解决办法：让父元素“占位”。使用clearfix伪元素。
清除浮动
　　5.overflow

　　overflow: visible | auto | hidden | scroll 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。body对象和textarea对象的默认值是auto。
　　6.clear

　　clear: none | left | right | both 设置元素的左边(右边)不允许有浮动对象。
　　7.display

　　display: block | none | inline | inline-table ... 设置元素的特性
八、定位

　　position: static | absolute | fixed | relative

　　- static: 静态定位不能移动元素的位置，静态定位的元素就是标准流元素的显示方式。
　　1.absolute 绝对定位

　　释义:

　　- 如果一个元素设置了绝对定位，如果该元素的父元素设置了静态定位或者没有定位，那么当前子元素是以body(浏览器)左上角为参照进行位置移动。

　　- 如果一个子元素设置了绝对定位，如果该子元素的父元素设置了除静态定位以外的其他定位，那么当前绝对定位的子元素会以父元素左上角为参照进行位置移动。

　　使用:

　　- 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。

　　- 否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

　　绝对定位元素的特点

　　- 脱标，不占位置

　　- 实现元素模式转换，并且可以设置元素的height、width、padding和border。但不可以设置margin。

　　- 具有层叠性。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

　　总结：脱标看脸。
　　2.relative 相对定位

　　释义:

　　- 相对定位元素是以元素自身原来的位置为参照设置定位。

　　相对定位的特点:

　　- 相对定位的元素占位置，没有脱离文档流，不脱标。

　　- 不可层叠，但将依据 left，right，top， bottom 等属性在正常文档流中偏移位置。

　　总结：不脱标自恋。
　　3.fixed 固定定位

　　- 固定定位的元素脱标不占位。

　　- 固定定位的元素可以实现模式转换。

　　- 固定定位的元素始终是以body(浏览器)可视区域为参照设置定位。

　　- 设置left,right,top,bottom是指的可视区域。

　　总结：脱标死心眼。
　　4.z-index

　　只有（除静态定位）定位的元素有层级关系，通过z-index属性改变层级关系。

　　层级关系特点：

　　- 当给一个元素设置了定位，那么该元素默认的层级z-index值是auto(0)。

　　- 当z-index值相同的情况下，那么最后的定位元素层级要高于前面的定位元素。当z-index值不同的情况下，那么z-index值越大该元素的层级越高。

　　- 如果元素的父元设置了z-index值,那么父元素的z-index值越大，那么该元素的层级越高。

　　- 层级越高越优先显示，z-index值越高越优先显示。
　　5.使用

　　- 定位体现的是元素之间的层级位置关系，浮动体现的是元素之间的并排位置关系。

　　- 定位需要给父元素和子元素设置父相子绝，浮动需要注意父元素的清除浮动并且要给每一个子元素都设置浮动。

　　- 不规则布局的元素使用定位，规则排列的元素使用浮动。
九、一些注意

　　1.通用样式设置
复制代码

/*摘自腾讯QQ*/
body, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, ol, ul, th, td, dl, dd{
    margin: 0;
    padding: 0;
}
body {
    font: 12px "宋体", "Arial Narrow", Helvetica;
    background: #FFFFFF;
    -webkit-text-size-adjust: 100%;
}
a {
    color: #2d374b;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
em{
    font-style: normal;
}
li{
    list-style: none;
}
img{
    border: 0;
    vertical-align: middle;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
p{
    word-wrap: break-word;
}

复制代码
　　2.网页布局

　　- 网页布局优先考虑标准流

　　- 然后考虑使用浮动

　　- 最后使用定位

　　- 元素模式转换必须使用display