`
oolala
  • 浏览: 103200 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
09c341db-7f05-3f2b-a572-9ee69a5d8a77
unix环境高级编程
浏览量:22697
社区版块
存档分类
最新评论

CSS样式表

    博客分类:
  • CSS
 
阅读更多

1 使用css样式的方式

 
html <!DOCTYPE>声明
html4
html5  <!DOCTYPE>
 
 
内联样式表
<body style="background-color: seagreen;margin: 0;padding: 0;">

嵌入式样式表<style type="text/css"></style>
需要将样式放在<head></head>之中

引入样式表
<link rel="stylesheet" type="text/css" href="style.css">

 
定义样式表
HTML标记选择器
<p></p>
p{属性:属性值;属性1:属性值1}
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用分号隔开


class定义
<p class=“p”>…</p>
class定义是以.开始
.p { 属性:属性值}

ID选择器
<p id=“p”>….</p>
ID定义是#开始的
#p{属性:属性值}

优先级
ID > Class >HTML
同级时选择离元素最近的一个



CSS常见属性
1 颜色属性
color属性定义文本的颜色
color:green
color:#ff6600
color:#f60

2字体属性
1 font-size 字体大小
   px:设置一个固定的值
   %:父元素的百分比
   larger:比父元素大
   smaller:比父元素小
   inherit:继承父元素的
   
2 font-family 字义字体
   font-family:微软雅黑、serif
   可以使用逗号隔开,以确保当字体不存在的时候直接使用下一个
   font-weight 字体加粗
   font-style 字体样式
   font-variant 小型大写字母显示文本


3 背景属性
    背景颜色 background-color
    背景图片background-image
    背景重复 background-repeat
           repeat repeat-x repeat-y no-repeat 

    背景位置background-position
           横向left centre right
   纵向top centre bottom
    
4 文本属性
   text-align 横向排列 left center right
   line-height 文本行高
                     a)%基于字体大小的百分比行高
                     b)数值来设置固定值
   text-indent 首行缩进
   letter-spacing 字符间距离
                        1)normal 默认 2)length设置具体的数值  3 inherit 继承

   direction 文本方向 ltr rtl inherit
   text-transform 文本大小写

5 边框属性
    1)边框风格 border-style
    2)边框宽度 border-width
    3)边框颜色 border-color
   
 
div css 布局
1  div和span
div和span在整个html标记中,没有任何意义,他们的存在就是为了应用css样式
div和span的区别在于,span是内联元素,div是块级元素

2 盒模型
盒子外边距:margin
鸽子内边距:padding
盒子边框宽度:border
盒子宽度:width
盒子高度:height

3 布局相关属性
1)position定位方式
relative 正常定位
absolute 根据父元素进行定位
fixed 根据浏览器窗口进行定位
static 没有定位
inherit 继承

2)  定位
left right top botton

3)z-index 层覆盖先后顺序(优先级)

4)display  显示属性
   none层不显示   
   block 块状显示,在元素后面换行,显示下一个块元素
   inline 内联显示,多个块可以显示在一行内
   块元素可以显示宽度,内联元素不可以显示宽度          

5)float 浮动属性

6)clear清除浮动

7) overflow溢出处理


分享到:
评论

相关推荐

    pocketsphinx-0.1.15-cp34-cp34m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    【java毕业设计】书画拍卖网站源码(ssm+mysql+说明文档).zip

    环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    【java毕业设计】“星辰”旅行分享系统源码(ssm+mysql+说明文档).zip

    环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    Pillow-9.1.1-cp38-cp38-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    pocketsphinx-0.1.15-cp36-cp36m-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    HUAWEI iMaster NCE ²úÆ·²ÊÒ³_V100R019C00 01.pdf

    HUAWEI iMaster NCE ²úÆ·²ÊÒ³_V100R019C00 01.pdf

    Pillow_SIMD-9.0.0.post0-cp37-cp37m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    【java毕业设计】家用电器销售网站源码(ssm+mysql+说明文档+LW).zip

    功能说明: 设计开发了具有管理员;个人中心、用户管理、商品分类管理、品牌管理、商品信息管理、订单评价管理、留言板管理、系统管理、订单管理,用户;个人中心、订单评价管理、我的收藏管理、订单管理,前台首页;首页、商品信息、商品资讯、留言反馈、我的、跳转到后台、购物车等功能的家用电器销售网站。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    中国2012-2022年各地区新质生产力水平测算数据(王珏版)【重磅,更新!】

    1、资源内容地址:https://blog.csdn.net/abc6838/article/details/143838732 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 4、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理

    preshed-3.0.2-cp35-cp35m-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    param-1.12.2-py2.py3-none-any.whl.rar

    PartSegCore_compiled_backend-0.12.0a0-cp36-cp36m-win_amd64.whl.rar

    【java毕业设计】高校物资采购管理系统源码(ssm+mysql+说明文档+LW).zip

    功能说明: 系统主要包括个人中心,供应商管理,学院管理,公告信息管理,采购信息管理,采购信息管理,招标信息管理,投标信息管理,中标通知管理等功能模块。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    redis7.4镜像docker包

    redis7.4镜像docker包

    中国分省分产业碳排放数据(绿色系列之一).zip

    中国分省分产业碳排放数据(绿色系列之一).zip

    peewee-3.15.0-cp39-cp39-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    Pillow-8.3.2-cp39-cp39-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    基于Scrapy+Elasticsearch+Django搭建的分布式电影搜索.zip

    基于Scrapy+Elasticsearch+Django搭建的分布式电影搜索.zip

    汉语言文学 4.pdf

    汉语言文学 4.pdf

    【java毕业设计】交通事故档案管理系统源码(ssm+mysql+说明文档+LW).zip

    功能说明: 使用交通事故档案管理系统分别为管理员和用户两个权限子模块。 管理员所能使用的功能主要有个人中心、用户管理、部门信息管理、警察信息管理、事故类型管理、事故信息管理、档案类型管理、档案信息管理、申诉信息管理等。 用户可以实现个人中心、警察信息管理、事故信息管理、申诉信息管理等。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上 服务器:tomcat7及以上

    yolo算法-红外图像疲劳驾驶数据集-2000张图像带标签.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值

Global site tag (gtag.js) - Google Analytics