CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,并且能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,通常情况下CSS会配合DIV标签一同使用.

CSS全称层叠样式表(Cascading Style Sheets),CSS使得网站可以,创建文档内容清晰地独立于文档表现层,样式表定义如何显示HTML元素,样式通常保存在外部的.css文件中.通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观,由于允许同时控制多重页面的样式和布局,CSS 可以称得上WEB设计领域的一个突破.作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中.如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新.

CSS 的引用方法

直接引用: 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.

<body><p style="color: red"> hello lyshark </p><div style="color: yellow ; background: red"> hello div </div>
</body>

头部引用: 直接在HTML头部使用style类型声明,以下是对div标签进行修改的代码.

<head><style type="text/css">.div{color:yellow ;background:red ;}</style>
</head>

外部引用: 外部引用是最常用的一种引用方式,就是将CSS与HTML代码分离,方便管理.

<head><link type="text/css" rel="stylesheet" href="mystyle.css" /><link type="text/css" rel="stylesheet" href="css/style.css" /><link type="text/css" rel="stylesheet" href="//google.com/style.css" />
</head>

导入引用: 此引用方式,有一定的局限性,而且受引用数量的限制,一般不使用,了解即可.

<head><style>div {background-color: red !important ;@import "style.css" ;@import "mystyle.css" ;}</style>
</head>

CSS 常用选择器

通用选择器: 通用选择器就是使用星号来标注,则会对所有的页面元素生效,也就是全局生效.

<head><style type="text/css">*{background: red ;color: bisque ;}</style>
</head><body><div>这是DIV标签</div><p>这是P标签2</p><p>这是P标签1</p>
</body>

标签选择器: 比如使用以下方法,就可以使指定的DIV标签进行修改,凡是全局范围的DIV标签都会应用.

<head><style type="text/css">div{background: red;color: bisque;}</style>
</head><body><div>这是DIV标签1</div><div>这是DIV标签2</div><p>这是P标签2</p><p>这是P标签1</p>
</body>

ID选择器: 以下案例中只对ID=div_id1的标签修改,警号代表ID调用,注意的ID号是唯一的不能够重复.

<head><style type="text/css">#div_id1{background: red;color: bisque;}</style>
</head><body>
<div id="div_id1"> 这是DIV标签1</div>
<div id="div_id2"> 这是DIV标签2</div>
</body>

Class选择器: 以下案例就是类选择器的使用技巧,类选择器一般用句号代表,该类的名称允许重复.

<head><style type="text/css">.lyshark{background: red;color: bisque;}</style>
</head><body>
<div class="lyshark">这是DIV标签<div class="lyshark">子标签也会变</div><div class="lyshark">子标签也会变</div>
</div>
</body>

嵌套选择器: 如下嵌套,查找id=outher标签,里面的class=A1,里面的class=B1,将其变成红色.

<head><style type="text/css">#outher .A1 .B1{color: red;}</style>
</head><body>
<div id="outher"><div class="A1"> hello A1<div class="B1"> hello B1 </div></div><div class="A2"> hello A2</div>
</div>
</body>

组合选择器: 组合的意思就是将一些标签组合在一起,让它们使用相同的CSS代码.

<head><style type="text/css">div,h1,p{color: red;}</style>
</head><body><div>hello div</div><h1>hello h1</h1><p>hello P</p>
</body>

后代选择器: 后代也就是继承的意思,以下所有在h1标签内的em标签中的内容全部变成红色.

<head><style type="text/css">h1 em{ color: red; }</style>
</head><body><h1> hello <em>lyshark</em> </h1><p> hello <em>lyshark</em> </p>
</body>

子代选择器: 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器.

<head><style type="text/css">h1 > strong {color:red;}</style>
</head><body><h1> hello <strong>lyshrk</strong> <strong>lyshrk</strong> </h1><h1> hello <em><strong>lyshrk</strong></em> </h1>
</body>

相邻选择器: 通过使用相邻选择器,如下解释,将把h1标签的后面的第一个p标签变成红色.

<head><style type="text/css">h1 + p {color: red;}</style>
</head><body><h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p>
</body>

属性选择器: 通过属性选择器实现选择指定的标签,过程中可以指定My=lyshark这样的自定义类型.

<head><style type="text/css">[class="mydiv"]{ color: red;}div[My="lyshark"]{color: green;}div[id ^="myid"]{color: yellow;}</style>
</head><body><div class="mydiv"> hello lyshark </div><div My="lyshark"> hello lyshark </div><div id="myid"> hello lyshark </div>
</body>

伪元素选择器(1): 鼠标经过超链接呈现出不同的状态,或者点击超链接会出现不同的效果.

<head><style type="text/css">a:link {color: #FF0000}           #鼠标没有碰过的样式a:visited {color: #00FF00}        #已经访问过的链接样式a:hover {color: #FF00FF}          #鼠标放上去的样子a:active {color: #0000FF}         #选择链接时的样式</style>
</head><body><a href="www.baidu.com" target="_blank">这是链接</a><p>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效</p><p>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效</p>
</body>

伪元素选择器(2): 伪元素after的功能是在P标签后面添加一行内容,而before功能则是在P标签前添加.

<head><style type="text/css">p:after{content:"lyshark";}p:before{content:"my";}</style>
</head><body><p> ---name--- </p>
</body>

CSS 常用的属性

颜色属性: 颜色属性,多用于对标签的配置,以下列举的方式为最常用的四种颜色选择方式.

<h1 style="color: red"> 红色的h1标签 </h1>
<h1 style="color: #ff6600"> 橙色的h1标签 </h1>
<h1 style="color: rgb(255,255,0)"> 黄色的h1标签 </h1>
<h1 style="color: rgba(255,20,255,1)"> 紫色的h1标签 </h1>

字体属性: 字体属性用来调节网页中的各种字体的显示效果,包括调节字体大小,类型,状态等.

< ----------------------[设置字体大小]---------------------- >
<h1 style="font-size: 15px"> 设置字体大小15像素 </h1>
<h1 style="font-size: 30%"> 设置全局字体30% </h1>
<h1 style="font-size: larger"> 设置字体格式 </h1>< ----------------------[设置字体类型]---------------------- >
<h1 style="font-family: 微软雅黑,Serif"> 设置微软雅黑 </h1>
<h1 style="font-family: 华文新魏,Serif"> 设置华文新魏 </h1>
<h1 style="font-family: 新宋体,Serif"> 设置新宋体 </h1>< ----------------------[设置字体状态]---------------------- >
<h1 style="font-weight: normal">默认值</h1>
<h1 style="font-weight: 100">直接赋值</h1>
<h1 style="font-weight: bold">显示加粗</h1>
<h1 style="font-weight: bolder">显示更粗</h1>
<h1 style="font-weight: lighter">显示更细</h1>< ----------------------[添加字体阴影]---------------------- >
<h1 style="text-shadow: red 5px 5px 2px;">添加字体阴影</h1>
<h1 style="text-shadow: -5px -5px 2px gray;">向左上角投影</h1>
<h1 style="text-shadow: -5px 5px 2px gray;">向左下角投影</h1>< ----------------------[其他常用状态]---------------------- >
<h1 style="text-decoration: underline">添加下划线</h1>
<h1 style="text-decoration: line-through">添加批注横批</h1>
<h1 style="text-transform: uppercase">全部字母大写</h1>
<h1 style="text-transform: lowercase">全部字母小写</h1>

背景属性: 背景属性用于控制背景色,背景图片等一些显示格式,还可以控制背景图片的排列方式.

<body style="background-color: red"> 设置背景颜色为红色</body>
<body style="background-size: 30px 50px"> 设置图像大小</body><body style="background-position: center;"> 居中显示图片</body>
<body style="background-repeat: no-repeat"> 不重复图片</body>
<body style="background-attachment: fixed"> 固定图片位置</body>
<body style="background-repeat: repeat"> 重复铺满图片</body>
<body style="background-image:url(image.bmp)"> 设置背景图片</body><body style="background-repeat: repeat-x"> 向X轴重复</body>
<body style="background-repeat: repeat-y"> 向Y轴重复</body><body style="background: 背景颜色 url(图像) 重复 位置"> 简写模式</body>
<body style="background: red url(images/bg.jpg) no-repeat top center"> 简写实例</body>

文本属性: 文本属性用于控制整个段落,或者是整个div元素的显示效果,包括缩进文字对齐等.

< ----------------------[常用文本控制]---------------------- >
<div style="text-indent: 150px"> 行首缩进150像素</div>
<div style="letter-spacing: 10px"> 字符间距10像素</div>
<div style="word-spacing: 20px"> 单行间距20像素</div>
<div style="line-height: 200px"> 控制文本行高</div>
<div style="white-space: nowrap"> 强制不换行,直到遇到br</div>< ----------------------[文本排列控制]---------------------- >
<div style="text-align: center"> 居中对齐</div>
<div style="text-align: right"> 居右对齐</div>
<div style="text-align: left"> 居左对齐</div>
<div style="direction: rtl"> 文本从左边流入</div>
<div style="direction: ltr"> 文本从右边流入</div>

边框属性: 边框属性用于设置目标对象的边框特征,包括边框颜色,粗细,以及使用线条等.

< ----------------------[常见边框类型]---------------------- >
<div style="border-style: solid">普通边框</div>
none   #无边框            inherit #继承
solid  #直线边框          groove #凸槽边框
dashed #虚线边框          ridge  #垄状边框
dotted #点状边框          inset  #边框
double #双线边框          outset #边框< ----------------------[常用边框格式]---------------------- >
<div style="border-style: solid;border-width: thin"> 细线边框</div>px      #固定值的边框     thick   #粗边框     inherit #继承
medium  #中等边框         thin    #细边框< ----------------------[常用边框颜色]---------------------- >
<div style="border: 10px #ff6600 solid"> 边框简写格式</div>
<div style="border-style: solid;border-radius: 20px"> 椭圆边框</div>
<div style="border-style: solid;border-color: red"> 红色边框</div>
<div style="border-style: solid;border-color: #ff0ff0"> 紫色边框</div>
<div style="border-style: solid;border-color: rgb(255,254,3)"> 黄色边框</div>
<div style="border-style: solid;border-color: rgba(255,254,3)"> 黄色边框</div>

位置属性: 位置属性就是指定元素的位置,它可以用来控制任何网页元素在浏览器文档窗口中的位置.

< ----------------------[位置调节属性]---------------------- >
left:                设置元素左边的水平位置
top:                 设置元素顶部的垂直位置
width:               设置元素显示的宽度像素
height:              设置元素显示的高度像素
z-index:             设置叠层的优先级,常用于模态对话框< ----------------------[常用定位属性]---------------------- >
position: 用于设定队形的定位方式,分别有以下三种取值.
-> absolute(绝对定位)  精确的定位元素在页面的独立位置,不考虑页面上的其他元素位置.
-> relative(相对定位)  相对定位所设定的位置是相对于元素通常应在的位置的偏移量.
-> static(无特殊定位)  默认方法,使用HTML中通常的定位方法,不用再专门设置元素的位置值.

布局属性: 布局属性用于指定元素在网页中如何放置,主要包括以下几种属性.

< ----------------------[控件显示属性]---------------------- >
visibility: 用于设置元素的可见状态,默认有以下三种属性:
-> inherit  继承父层的显示属性
-> visible  显示在网页中
-> hidden   隐藏指定元素display: 用于设置元素的可见状态,默认有以下4种属性:
-> block     在元素的前和后都会有换行
-> inline    在元素的前和后都不会有换行
-> list-item 与block相同,但增加了目录列表项标记
-> none      不显示元素,也就是隐藏元素.< ----------------------[控件其他属性]---------------------- >
clip: 用于绝对定位元素的可视区域,其他的区域隐藏:
-> clip:rect(top,right,bottom,left)overflow: 设置如果元素中内容超出了元素的大小时如何处理:
-> visible  增加元素的显示空间大小
-> hdden    保持元素的显示大小不变
-> scroll   表示总是显示滚动条
-> auto     超出显示大小才显示滚动条float: 设置元素是否为浮动模式,可设置左浮动和右浮动:
-> left     表示文本在这个元素的左边
-> right    表示文本在这个元素的右边
-> none     表示这个元素两边不能有空文本clear: 清除该元素旁边的其他浮动对象,常与float通用:
-> both     表示不允许有浮动的对象
-> none     允许两边都可有浮动对象
-> left     不允许左边有浮动的对象
-> right    不允许右边有浮动的对象page-break-before:always: 设置打印该元素前是否强制分页
page-break-after:always:  设置打印该元素后是否强制分页

边缘属性: 边缘属性包括元素边界的矩形区域的特征,边缘属性包括margin,padding,width,style.

< ----------------------[3个边界属性]---------------------- >
margin:  设置元素边界与头元素之间的空隙大小.
padding: 设置元素边界与内容之间的空隙大小.
border:  设置元素内间隙与外间隙之间的距离.< ----------------------[属性与颜色]---------------------- >
border-top-width     指定上边框宽度
border-right-width   指定右边框宽度
border-bottom-width  指定下边框宽度
border-left-width    指定左边框宽度border-top-color     指定上边框颜色
border-top-style     指定上边框样式

列表属性: 列表属性用于设置列表项标记的类型,列表项图片和位置,以提供灵活列表显示.

list-style-type:none          无标记
-> disc             默认,标记是实心圆
-> circle           标记是空心圆
-> square           标记是实心方块
-> decimal          标记是数字
-> lower-alpha      小写英文字母
-> upper-alpha      大写英文字母
-> decimal-leading-zero  0开头的数字标记< ------------------------------------------------------- >
list-style-position:inside    列表项目标记放置在文本以内,且环绕文本根据标记对齐
-> outside          默认值,保持标记位于文本的左侧
-> inherit          规定应该从父元素继承list-style-position属性的值< ------------------------------------------------------- >
list-style-image:URL          图像的路径
-> none             默认无图形被显示
-> inherit          规定应该从父元素继承list-style-image属性的值简写方式: list-style:square inside url('./arrow.jpg');

CSS 之盒子模式

所有的页面的元素都可以看成是一个盒子,占据一定的页面空间,占据的空间要比实际使用的空间要大得多,我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置,盒子模型是由:内容(Content)、边框(Border)、间隙(padding)、外间隔(margin)组成,为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离,他们的关系如下图所示:

盒子演示实例: 盒子的自由定位例子,以下代码配合边框调节,用来练习盒子的自由定位.

<style>body{margin: 0px;}#div1{background-color: green;width: 300px;height: 300px;border: 1px solid red;}#div2{background-color: yellow;width: 100px;height: 100px;/*margin-top: 100px;*//*margin-left: 100px;*/margin: 100px;}
</style>
</head><div id="div1"><div id="div2"></div></div>
</body>

元素居中设置: 将DIV容器设置到页面的正中心,并可以自动的调整页面的大小,容器中可放内容.

.form-center{width: 100px;height: 100px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}

脱离文档流居中:

<body>
<style type="text/css">
.center{display: block;position: fixed;_position: absolute;top: 50%;left: 50%;width: 666px;height:400px;margin-left: -333px;margin-top: -200px;z-index: 10001;box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;background-color: #fff;
}
</style>
<div class="center">
</div>
</body>

元素放置右下角: 将元素放置在屏幕右下角,通过定位position:fixed选项实现这一效果.

.form-right{background-color: #5f2dab;width: 300px;height: 100px;position: fixed;right: 20px;bottom: 10px;}

实现页面小尖角: 在页面的指定位置绘制小倒转的尖角符号.

.icon {display: inline-block;border-top:15px solid red;border-right:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid transparent;
}

float浮动模式: 通过使用float:left选项,使元素自动浮动在其他标签之上,可设置浮动的位置,使用clear清理格式.

<head><meta charset="UTF-8"><style>.outer{background-color: green;}.menu1{background-color: blue;width: 100px;height: 20px;float: left;}.menu2{background-color: yellow;width: 100px;height: 20px;float: left;}.clear{clear: both;}</style>
</head><body>
<div class="outer"><div class="menu1">菜单1</div><div class="menu2">菜单2</div><div class="clear"></div>           <!--撑起来,让上面的标签浮动且不覆盖里面的内容-->
</div><div class="bottom" style="background-color: aquamarine">底部菜单</div>
</body>

后台布局: 最后一个简单的后台布局.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin:0;}.pg-header {height:48px;background-color: #2459a2;}.pg-body .body-menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body .body-content{position: absolute;top:48px;left:210px;right:0;background:green;/*开启下面,滚动条不变*//*bottom:0;*//*overflow: auto;*/}</style>
</head><body><div class="pg-header"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content"><h1>hello world </h1></div></div><div class="pg-heaher"></div>
</body>
</html>

转载于:https://www.cnblogs.com/LyShark/p/11136264.html

Web前端开发CSS基础(2)相关推荐

  1. Web前端开发css基础样式总结

    颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...

  2. Web前端开发——CSS样式(Ⅰ)文本与文字样式

    目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...

  3. web前端开发-html5基础(含代码)

    文章目录 前言 一.小白应该如何入门Web前端开发? 二.HTML5-第一天 a-认识HTML(阿巴阿巴...) 1.什么是HTML? 2.HTML和CSS的关系? 3.网页的结构.表现.行为? b- ...

  4. 设计与实现Web前端开发的基础

    1 概要 对于前端的学习内容,应该从如下几个方面进行从而对整体的业务以及技术的定义.作用.相互之间的关系,以及在各个阶段使用什么样的技术有一个简单的了解以及认知. 2 知识列表 2.1 什么是程序? ...

  5. web前端开发零基础入门教程

    端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...

  6. 【WEB前端开发】基础知识大总结(HTML5+CSS3)

    本文共一万七千字,十六个内容点,七十个知识点 目录 一.转义字符 二.表单标签 1.form标签 2.input元素 3.label 标签 4.select 标签 5.button 元素 三.语义化标 ...

  7. Web前端开发JavaScript基础(3)

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  8. 前端开发--CSS基础

    快速生成css样式 采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...

  9. web前端开发入门基础教程系列

    前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...

最新文章

  1. jmeter名词解释之聚合报告
  2. 为什么String中的Java hashCode()使用31作为乘数?
  3. 神经网络变学习率算法代码_机器学习算法之神经网络
  4. 前端简洁并实用的工具类 (推荐收藏)
  5. B. Box Fitting
  6. linux gtest安装
  7. Linux I2C App 开发示例
  8. 一身的债务,信用卡还逾期,我一个女的,怎么办?
  9. 【52.55%】【BZOJ 4520】K远点对
  10. 开放 Rake 打包项目
  11. 匹配数据库 帆软 查询条件_帆软报表学习笔记①——根据参数查询
  12. winuser.h(10105,3): error C2059: 语法错误:“(”
  13. 经纬度数据计算-JavaScript
  14. ORACLE数据库23道练习题
  15. 计算机组成与系统结构2018,计算机组成原理与系统结构2018-2019试卷a.doc
  16. 语言表达逻辑训练,让你说话更条理清晰
  17. 联想Y7000P添加内存条以及固态硬盘
  18. 四旋翼自主飞行器探测跟踪系统补充
  19. 一张画布重塑你的职业生涯
  20. 2022年11月总结

热门文章

  1. 对象变为指定格式的数组
  2. python中RabbitMQ的使用(路由键模糊匹配)
  3. 解决 kindle 书籍字体颜色偏淡问题的方法
  4. redis 笔记06 发布与订阅、事务、慢查询日志、监视器
  5. Codeforces Round 261 Div.2 D Pashmak and Parmida's problem --树状数组
  6. 转 ABAP_ALV_Function方式与OO方式(较为简单、普通的ALV)
  7. css --- 使用scss生成常用的基本css样式
  8. redux进一步优化
  9. BlackHat Arsenal USA 2018 ToolsWatch黑客工具库
  10. 第一个PowerShell脚本——PowerShell三分钟(九)