CSS样式简单设置

1.设置行高:p{line-height:1.5em;}

2.中文字间隔、字母间隔设置:letter-spacing:50px;

3.单词间距设置:word-spacing:50px;

4.样式居中:div{text-align:center;}

5.元素分类--内联块状元素:display:inline-block;

6.设置边框:

border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

border-color(边框颜色)中的颜色可设置为十六进制颜色。

border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)。

7.使用下面代码实现其它三边(上、右、左)边框的设置:

div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边(上、右、左)边框的设置:

border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;

8.元素内容与边框之间是可以设置距离的,称之为“填充”:

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

9.边框外的边界距离:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

10.绝对定位: 
position:absolute;
    left:100px;
    top:50px;11.相对定位:
 position:relative;
    left:100px;
    top:50px;相对原来的位置进行定位;

12.固定位置定位:

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

 
时间: 2024-12-27 15:19:49

CSS样式简单设置的相关文章

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

css样式表设置

有参考此片博文 1.内联式样式表 是指将CSS样式编码写在HTML标签中,在标签内编写的样式能影响的范围最小,只改变本标签的文字样式,同样的标签不会受到影响,也称行间样式表. 格式如下 <h1 style="font-size:12px;color:#000FFF"> 我的CSS样式. </h1> 行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中.这是最基本的形式,但是它没有实现表现与

CSS文本简单设置

文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时候,主要是注重对文本的颜色设置,文本的对齐方式.文本的修饰,文本的转换和文本的缩进.以及关于文本设置的时候文字或者是行和字符之间的距离的一些设置.那么我们如今就来一一的看一下这些设置. 在说这些设置之前我们有必要了解CSS中的文本属性,由于全部的设置都是对文本的属性进行的设置,那么CSS中的文本属性

css样式优化 设置一种通用的class类

这里,我说的是“通常情况下”,因为其他测试引擎可能对容器和测试有截然不同的定义.但一般情况下,测试就是单个的方法,容器指的就是测试类. 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的影响,单单是自己的念想受到了一定得局限,想法不能够像平地而起的高楼大厦建成一样.可是那大楼也是有烂尾的呀,我觉得最重要的还是外在环境与个人观念的先决条件,决定了拖延症的症状的好坏,有那么一些人,它也有拖延症,但是它在拖的中间,想的更多,看的更远.事情在做的时候

js访问css样式 | js设置样式 | js获得样式 | js删除样式

js获取css的各种样式并且设置他们

js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute

如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢?可以扩展到了解查看任何HTML标签被设置什么CSS样式.DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式. 一.直接观察div标签被设置什么样式   -   TOP 比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置什么样式. 简单直观分析DIV CSS布局用什么样式图 如上图,可以大致分析对应样式有哪些,比如使用背景图片,设置宽度多少.设置CSS高度多少.字体大小.文字靠左.距离左多少. 以上

CSS基础学习十二:CSS样式

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式.我们就目前用到的 CSS样式简单地介绍一下. 下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色

认识CSS样式

1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等.如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS注释代码就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明 2.内联式CSS样