CSS基础整理(样式表 样式属性)

  样式属性

1· 背景与前景

    background-color:#00F; /*背景色,样式表优先级高*/
    background-image:url(); /*设置背景图片(默认)*/
    word-wrap:break-word;
    word-break:break-all; /*自动换行*/
    background-attachment:fixed; /*背景是固定的,不随字体滚动*/
    background-repeat:no-repeat; /*背景图 no-repeat不平铺;repeat平铺;repeat-x横向平铺;repeat-y纵向平铺*/
    background-position:center;/*背景图居中,设置背景图位置时,repeat必须为no-repeat*/
    background-position:right top;
    background-position:left 100px top 200px;}/*离左边100像素,离上边200像素*/

    字体

    font-family:"Courier New", Courier, monospace;/*设置字体*/
    color:#FFF; /*文字颜色*/
    font-size:18px; /*字体大小*/
    font-weight:normal; /*bold是加粗,normal是正常*/
    font-style:italic; /*倾斜,normal是正常*/
    text-decoration:overline; /*下划线;overline是上划线;line-through是删除线;none是去除下划线*/
    text-align:center; /*(水平)居中对齐;left是左对齐;right是右对齐*/
    vertical-align:middle; /*(垂直)居中对齐;top是顶端对齐;bottom是底部对齐。在设置行高之后使用*/
    text-indent:28px;/*首行缩进量*/
    line-height:24px;/*行高。一般为1.5~2倍字体大小*/
    display:inline-block; /*none是不显示;inline-block显示为块,不自动换行,宽高可设;block显示为块,自动换行;inline效果同span标签,不自动换行,宽高不可设*/
    visibility:visible; /*可视性,hidden隐藏但是占用空间;visible显示*/

    边界与边框

    

    border:5px solid #F00; /*四边框;5像素宽,实线,红色*/
    border-width:5px;
    border-style:solid;
    border-color:#F00;

    border-top:5px solid #9F0; /*上边框:5像素宽,实线,绿色*/
    border-bottom:5px solid #39C; /*下边框:5像素宽,实线,蓝色*/
    border-left:5px solid #FF0; /*左边框:5像素宽,实线,黄色*/
    border-right:5px solid #FFF; /*右边框:5像素宽,实线,白色*/
    margin:50px; /*四边外边框宽度为10像素,auto,居中*/
    margin-top:10px; /*上边外边框宽度为10像素,其他三边边框类似*/
    margin:20px 0px 20px 0px; /*顺序为上右下左,顺时针顺序*/

    padding:10px; /*内容与边框的四边间距为10像素*/
    padding-top:20px; /*内容与边框的上间距为20像素,其他三边类似*/
    padding:50px 20px 10px 20px; /*顺序为上右下左,顺时针顺序*/

 

时间: 2024-08-21 23:57:12

CSS基础整理(样式表 样式属性)的相关文章

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

HTML基础(五)——-css样式表——样式属性——格式与布局

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:absolute(或relative):那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素). 2.外层有position:absolute(或relative):那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素). 示

第一周复习二 (CSS样式表及其属性)

样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head></head>标签内.个人感觉多用于较多或通用的一类标签,用来减少工作量 <style type="text/css"> {} </style> 分为三种: 标签选择器 <style type="text/css">

为什么有时候Css样式表某个属性引用不成功?

首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想着给搜索框写一个搜索推荐的下拉列表框,思路很明确,不写了画图 代码如下 样式表 可是在引用样式表的时候suggbox的样式怎么都运行不出来结果,还特意加了边框背景.但是其它的引用都正常,如图没有边框背景 调试查看也有引用suggest,可并没有发现属性 试着在div里面加了style 居然有效果,那

css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url(路径); /*设置背景图片(默认为平铺.)*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中

HTML_css样式表 样式属性 格式布局

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,常用样式详细解读

#### CSS属性值background背景 -   背景颜色 - background-image:url(  );背景图片 - background-repeat:no-repeat; 设置背景图片是否平铺 - repeat:平铺,默认值 - no-repeat 不平铺 - background-size:100px 60px;设置图片的大小,值X/Y,可用单位百分比像素 - background-position:100px 60px;设置图片的位置,值X/Y,可用单位百分比像素,英文单

css样式表---样式表分类、选择器

一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> 例: 结果: 2.内嵌样式表.——放在页面的<head></head>中间.——可以对整个页面. <head> <meta http-equi

样式表的属性

昨天学习了在样式表中,对标签属性进行编辑,主要是要记忆属性的名称和作用: 1.字体 font-family 字体的样式 font-size 字体大小 font-style:italic: 字体倾斜 font-weight:bold字体加粗 text-decoration:underline; 下划线 overline      上画线 line-through 删除线(或者用<del></del>标签) color 字体颜色 2.对齐方式 text-align 水平对齐方式 ver