CSS语言基础

CSS语言基础

CSS概述

CSS基本语法结构

样式是CSS的基本单元,每个样式包含两部分内容:

  1. 选择器
  2. 声明:由属性和属性值构成以(;)结束
          属性 : 值       属性 : 值
 div    {color:blue;font-size:12px;}
选择器        声明          声明

注释:/* 注释内容 */

CSS的使用

内嵌样式

也叫行内样式

<p style="color:red;background:yellow;">内嵌样式-style属性</p>
内部样式表
<head>
	<style type="text/css">
		h1{
			color:#033;
			border:dashed 1px #6600CC;
		}
		hr{
			width:95%;
			text-align:center;
			color:#03C;
		}
		span{
			font-weight:bold;
		}
	</style>
</head>
外部样式表

分为:

  • 链接外部样式表
  • 导入外部样式表
  1. 链接外部样式表

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

    <link>为单标签

    属性描述
    type设置链接目标文件的MIME类型,CSS的为text/css
    rel设置链接目标文件与当前文件的关系,stylesheet表示为CSS
    hrefURL地址
  2. 导入外部样式表

    @import url("css/style.css");
    
链接与导入两种方式的区别描述
隶属关系不同<link>标签属于HTML,@import属于CSS提供的加载方式
<link>还可以引入其他类型的文件,@import只能载入CSS样式
加载时间及顺序不同<link>先将CSS文件加载到网页中,再进行编译
@import先将HTML结构呈现出来,在把外部CSS加载到网页中
兼容性不同@import低版本不能识别,<link>没问题
DOM模型控制样式使用JavaScript控制DOM改变样式时,只能使用<link>标签
而@import不受DOM模型控制
样式表的优先级

就近原则:内嵌 --> 内部 --> 外部 --> 浏览器缺省默认

CSS选择器

基本选择器

分为:

  • 通用选择器
  • 标签选择器
  • 类选择器
  • ID选择器
  1. 通用选择器(*)

    *{font-size:12px;color:red;}
    
  2. 标签选择器

    p{font-size:楷体;}
    
  3. 类选择器(.)

    .classname{property1:value;...}
    
    <div class="classname">...</div>
    
  4. ID选择器(#)

    #myId{
    	color:red;
    	text-decoration:line-through;
    }
    
    <p id="myId">...</p>
    

    ID选择器有一定局限性,尽量少用。

优先级:ID选择器 --> 类选择器 --> 标签选择器 --> 通用选择器

组合选择器

分为:

  • 多元素选择器
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 普通兄弟选择器
  1. 多元素选择器(,)

    p,div{font-size:14px;color:blue;}
    
  2. 后代选择器( )

    p div{background-color:#CCC;}
    
  3. 子选择器(>)

    选取直接子元素

    div>p{
    	font-weight:bold;
    	border:solid 2px #066;
    }
    
  4. 相邻兄弟选择器(+)

    紧接某元素之后的兄弟元素

    h3+p{font-weight:bold;}
    
  5. 普通兄弟选择器(~)

    h3~p{background:#CCC;}
    
属性选择器

分为:

  • 存在选择器
  • 相等选择器
  • 包含选择器
  • 连接字符选择器
  • 前缀选择器
  • 子串选择器
  • 后缀选择器
选择器类型语法实例描述
存在选择器[attribute]p[id]任何带id属性的<p>标签
相等选择器[attribute=value]p[name=“teaName”]name属性为“teaName”的<p>标签
包含选择器[attribute~=value]p[name~=“stu”]name属性包含“stu”单词,并与其他
内容通过空格隔开的<p>标签
连字符选择器[attribute|=value]p[lang|=“zh”]匹配属性等于zh或以zh开头的所有元素
前缀选择器[attribute^=value]p[title^=“zh”]选择title属性值以“zh”开头的所有元素
子串选择器[attribute*=value]p[title*=“ch”]选择title属性包含“ch”字符串的所有元素
后缀选择器[attribute$=value]p[title$=“th”]选择title属性值以“th”结尾的所有元素

CSS样式属性

文本属性

用于控制文本的格式化

功能属性名描述
缩进文本text-indent设置行的缩进大小,值可以为正和负值,单位可以用em,px,百分比
水平对齐text-align设置文本的水平对齐方式,取值为left,right,center,justify
垂直对齐vertical-align设置文本的垂直对齐方式,取值为bottom,top,middle,baseline
字间距word-spacing设置单词之间的标准间隔,默认normal(或0)
字母间隔letter-spacing设置字符或字母大小的间隔
字符转换text-transform设置文本中字母的大小写,取值为none,uppercase,lowercase,
capitalize
文本修饰text-decoration设置段落中需要强调的文字,取值为none,underline,overline
(上划线),line-through(删除线),blink(闪烁)
空白字符white-space设置源文档中的多余的空白,取值为normal(忽略多余),pre
(正常显示),nowrap(文本不换行,除非遇到<br/>标签)
字体属性
功能属性名描述
文本颜色color颜色。例如red,rgb(255,0,0),#FF0000
字体类型font-family字体。取值为宋体,隶书,Serif,Verdana等
字体风格font-style字体样式。取值为normal,italic(斜体),oblique(倾斜),两者一样
字体变形font-variant设定小型大写字母。取值为normal,small-caps(小型大写字母)
字体加粗font-weight字体粗细。取值为bolder(特粗),bold(粗体),normal,lighter
(细体)或者100~900之间的9个等级
字体大小font-size字体大小。绝对值:xx-small,x-small,small,medium(默认),
large,x-large,xx-large。相对值:单位可以是pt,em,百分比
行间距line-height文本的行高(两行文本基线的距离)
字体简写font一次设置两个或更多方面,顺序为font-style,font-variant,
font-weight,font-size/line-height,font-family
背景属性
功能属性名描述
背景颜色background-color设置元素的背景色
背景图像background-image背景图像。例如“background-image:url(bg.jpg);”,
没有图像为none
背景重复background-repeat平铺的方式。取值为no-repeat,repeat-x,repeat-y,repeat
背景定位background-position背景的位置。取值为top,bottom,left,right,center或
具体值(10px)或百分比
背景关联background-attachment设置背景是否随页面滚动。取值为scroll(默认),fixed(固定)
背景尺寸background-size背景尺寸,取值为像素或百分比
填充区域background-origin规定background-position相对于什么位置。取值为
border-box,padding-box,content-box
绘制区域background-clip规定背景的绘制区域。取值为booder-box,padding-box
content-box
背景简写background可以设置:background-color,background-position,
background-size, background-repeat, background-origin
background-clip, background-attachment, background-image
表格属性
功能属性名描述
边框border边框的宽度
折叠边框border-collapse是否边框折叠为单一边框。取值为separate(双边框,默认)
collapse(单边框)
宽度width表格宽度。取值为像素或百分比
高度height表格高度。取值为像素或百分比
水平对齐text-align水平对齐方式。取值为左对齐,右对齐,居中
垂直对齐vertical-align垂直对齐方式。取值为顶部对齐,底部对齐,居中对齐
内边框padding内容与边框的距离
单元格间距border-spacing相邻单元格的边框间的距离。仅用于双边框模式
标题位置caption-side标题位置。取值为top,bottom
列表属性
功能属性名描述
列表类型list-style-type设置列表的图像符号。取值为none,disc(默认,实心圆),
circle(空心圆),square(实心方块),decimal(数字),
lower-roman(小写罗马),upper-roman(大写罗马),
lower-latin(小写拉丁文字母),upper-latin(大写拉丁文字母)
列表项图像list-style-image指定图像。例如:list-style-image:url(xxx.gif)
符号位置list-style-position图形符号的位置。取值为inside(换行需要参考标志的位置),
outside(默认,换行时,无需参考标志的位置)
列表简写list-style顺序为list-style-type,list-style-position,list-style-image
分类属性

分为:

  • cursor
  • display
  • visibility
  • position
  • float
  • clear
  1. cursor属性

用于指定用户鼠标的指针类型。

属性值描述
auto取决于悬停对象,文本显示"I",超链接显示箭头
crosshair十字线形状
pointer指示链接,手的形状
move移动选择效果 (上下左右都是箭头)
text文本,类似竖线“I”
wait等待形状(一个圈,在那里转)
help问号或气球形状
ne-resize左下和右上箭头
se-resize左上和右下箭头
s-resize上下箭头
w-resize左右箭头
  1. display属性

    将页面元素隐藏或显示出来,也可以将元素强制改成块级元素或内联元素

    属性值描述
    none将元素设置为隐藏状态
    block显示为块级元素,元素前后会带有换行符
    inline默认,显示为内联元素,元素前后没有换行符
  2. visibility属性

    可以将页面隐藏,但是仍占用原来的空间。取值为:visible,hidden

  3. position属性

    将元素从页面流中偏移或分离出来,实现更精准的定位。

    属性值描述
    static正常流(默认)
    relative相对定位。相对于其正常位置进行定位,并保持其未定位前的形状及所占的空间
    absolute绝对定位。相对于浏览器窗口进行定位,将元素框从页面流中完全删除后,
    重新定位。当拖拽页面滚动条时,该元素一起滚动。
    fixed固定定位。相对于浏览器窗口进行定位,将元素框从页面流中完全删除后,
    重新定位。当拖拽页面滚动条时,该元素不会滚动。

    relative,absolute,fixed可以使用left,top,right,bottom进行重新定位(left:120px)

  4. float属性

    将元素从页面流中浮动出来

    属性值描述
    left元素浮动到左边界
    right元素浮动到右边界
    none默认,不浮动
  5. clear属性

    消除浮动所产生的影响

    属性值描述
    left清除左侧浮动产生的影响
    right清除右侧浮动产生的影响
    both清除两侧浮动产生的影响
    none默认,允许浮动元素出现在两侧

伪类与伪元素

根据元素的特殊状态来选取元素

伪类
伪类名描述
:active向被激活的元素添加样式
:focus向拥有键盘输入焦点的元素添加样式
:hover当鼠标驯服在元素上方时,添加样式
:link向未被访问的链接添加样式,仅适用于超链接
:visited向已被访问的链接添加样式,仅适用于超链接
:readonly向只读元素添加样式
:checked向被选中的元素添加样式
:disabled向被禁用的元素添加样式
:enabled向可用的元素添加样式
伪元素

表示某元素的部分内容,虽然逻辑上存在,但在DOM数中国不存在对应部分

伪元素描述
:first-line向文本的首行添加特殊样式
:first-letter向文本的第一个字母或汉字添加特殊样式
:before在元素之前添加内容
:after在元素之后添加内容

CSS页面布局

盒子模型

由内容(content),内边距(padding),边框(border),外边距(margin)组成。

┌──────────────────────────────────────────────────────────────┐
│                           margin                             │
│     ┌==================================================┐     |                         
|     │                                                  |     |  
|     │     ┌======================================┐     |     |        
|     │     |               padding                |     |     |
|     │     |     ┌--------------------------┐     │     |     | 
|     |     |     |                          |     |     |     |
|     |     |     |         content          |     |     |     |
|     |     |     |                          |     |     |     |
|     |     |     └--------------------------┘     |     |     |
|     |     |                                      |     |     |
|     |     └======================================┘     |     |
│     |                     border                       |     |
│     └==================================================┘     |
|                                                              |
└──────────────────────────────────────────────────────────────┘

内容区

盒子模型的中心(content),包含盒子的主要信息内容

属性描述
width宽度
height高度
overflow内容太多,溢出内容的处理方式
overflow值描述
visible默认值,溢出值不会被修剪,呈现在元素框之外
hidden溢出的内容将不可见
scroll溢出的内容会被修剪,但是可以通过滚动条查看
auto由浏览器决定如何处理

边框

围绕内容和内边距的一条或多条线

属性描述
border-top-width上边框的宽度,取值为thick,2px
border-top-style上边框的样式,取值为double,dotted
border-top-color上边框的颜色,取值为#ff0000
border-top简写形式,顺序为:border-top-width,border-top-style,border-top-color
border-right-width右边框的宽度
border-right-style右边框的样式
border-right-color右边框的颜色
border-right简写,顺序为:border-right-width,border-right-style,border-right-color
border-bottom-width下边框的宽度
border-bottom-style下边框的样式
border-bottom-color下边框的颜色
border-bottom顺序为:border-bottom-width,border-bottom-style,border-bottom-color
border-left-width左边框的宽度
border-left-style左边框的样式
border-left-color左边框的颜色
border-left顺序为:border-left-width,border-left-style,border-left-color
border-width边框宽度的简写,设置所有宽度
border-style边框样式的简写,设置所有样式
border-color边框颜色的简写,设置所有颜色
border边框的简写
CSS3新增
border-top-left-radius设置左上角圆角边框
border-top-right-radius设置右上角圆角边框
border-bottom-
left-radius
设置左下角圆角边框
border-bottom-
right-radius
设置右下角圆角边框
border-radius圆角边框的简写
box-shadow向框添加一个或多个阴影
边框宽度
参数的个数顺序
4个参数值上,右,下,左
3个参数值上,左+右,下
2个参数上+下,左+右
1个参数四个方向取值相同

取值为thick(粗边框)

边框样式
描述
none无边框
hidden隐藏边框
dotted点状边框,大多数浏览器呈现实线
dashed虚线,大多数浏览器呈现实线
solid实线
double双线,宽度等于border-width
groove3D凹槽边框,效果取决于border-color的值
ridge3D菱形边框,效果取决于border-color的值
inset3D凹边,效果取决于border-color的值
outset3D凸边,效果取决于border-color的值
圆角边框
属性描述
border-top-left-radius左上角圆弧
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-right-radius右下角

HR水平半径,VR垂直半径

分为:

  1. 水平半径与垂直半径相等

    • 一个参数

      border-radius:10px
      
    • 两个参数

      border-radius:10px 20px
      

      左上和右下为10px,右上和左下为20px

    • 三个参数

      border-radius:10px 20px 30px
      

      左上为10px,右上和左下为20px,右下为30px

    • 四个参数

      border-radius:10px 20px 30px 40px
      

      左上为10px,右上为20px,右下为30px,左下为40px

  2. 水平半径与垂直半径不相等

    需要用斜线(/)隔开

    • 一个水平和一个垂直

      border-radius:10px/20px  /* 水平/垂直 */
      
    • 两个水平和两个垂直

      border-radius:10px 30px/20px 40px /* 水平1 水平2/垂直1 垂直2 */
      

      左上和右下 水平半径为10px,垂直半径为20px

      右上和左下 水平半径为30px,垂直半径为40px

    • 三个水平和两个垂直

      border-radius:10px 20px 30px/50px 60px /* 水平1 水平2 水平3/垂直1 垂直2/
      

      左上 水平半径为10px,垂直半径为50px

      右上 水平半径为20px,垂直半径为60px

      右下 水平半径为30px,垂直半径为50px

      左下 水平半径为20px,垂直半径为50px

    • 两个水平和四个垂直

      border-radius:10px 20px/30px 40px 50px 60px /* 水平1 水平2/垂直1 垂直2 垂直3 垂直4 */
      

      左上 水平半径为10px,垂直半径为30px

      右上 水平半径为20px,垂直半径为40px

      右下 水平半径为10px,垂直半径为50px

      左下 水平半径为20px,垂直半径为60px

边框阴影

添加一个或多个阴影(box-shadow)

属性描述
h-shadow必需,指定水平阴影的位置,允许负值
v-shadow必需,指定垂直阴影的位置,允许负值
blur指定模糊距离
spread指定阴影的尺寸
color指定阴影的颜色
inset将外部阴影(outset)改为内部阴影
图像边框

当元素长度或者发生变化时,可以使用一个图像对边框进行绘制

属性描述
border-image-source图像路径,取值为none(没有边框图像),url()
border-image-slice图像边框内向偏移,对图像进行切割,取值为1~4个参数,百分数
border-image-width宽度
border-image-repeat是否平铺覆盖(repeat),取整平铺(round),拉伸覆盖(stretch)
border-image简写
  1. 边框背景的分割

    border-image-slice在逻辑上对图像进行分割。

    border-image-slice:10 20 30 40 fill;
    
  2. 边框背景的使用

    border-image:url(图像的路径) 图像分割方式(slice)/图像边框宽度(width) 图像的平铺方式(repeat)
    
  3. 中心区的fill填充

    border-image:url("images/borderImage2.jpg") 40 fill/40px stretch;
    

内边距

内容区与边框之间的距离(padding)

属性描述
padding-top上面的内边距
padding-right右边的内边距
padding-bottom下面的内边距
padding-left左边的内边距
padding简写

外边距

元素与元素之间的距离(margin)

外边距的基本用法
属性描述
margin-top上面的外边距,取值为px,auto
margin-right右边的外边距
margin-bottom下面的外边距
margin-left左边的外边距
margin简写
外边距合并

当两个外边距相遇时,会形成一个外边距,取值为前面两个中较大的

  1. 上下元素间的外边距合并

  2. 包含元素间的外边距合并

    父元素没有内边距和边框,且子元素没有外边距,父元素和子元素的上下边距也会合并

  3. 空元素的外边距合并

    空元素只包含外边距而无边框和填充时,上外边距和下外边距就会碰到一起,合并。

DIV+CSS页面布局

实现结构与外观相分离。

常见的布局方式:

  1. 表格布局

  2. 框架布局

  3. DIV+CSS

    要求页面分为五部分:

    • 横幅(banner)
    • 导航(navigator)
    • 焦点内容(focus)
    • 主题内容(content)
    • 版权(footer)
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值