常见文本类css属性

学习web的第六天

p{

  font-size:18px;  /*文本尺寸*/

  font-family:"隶书";  /*文本字体*/

  font-weight:bold;    /*文本加粗  bold 加粗  bolder 更粗*/

  color:red;    /*文本颜色*/

  text-align:center;   /*文本水平居中      center 居中     justify  两端对齐       left 左对齐   right  右对齐*/

  background-color:#ccc;     /*背景颜色*/

  background-image:url(img/*.jpg);   /*背景图片            可以简写   直接加颜色   就是添加背景颜色  图片也一样*/

  font-style:italic;    /*文本倾斜  oblique也可以  但最好用italic*/

   letter-spacing:2px;   /*字符间距*/

   line-height:20px;     /*行高*/

   text-indent:2em;    /*首行缩进*/

   word-spacing:2px;   /*单词间距*/

   line-height:2px;     /*垂直居中*/

  text-decoration:underline;     /*字符装饰线   underline  下划线       line-through   删除线     overline  上画线         更多用于超链接样式*/

我写了个网页:

<!DOCTYPE html>
<html>
    <head>
        <title>前端</title>
        <style type="text/css">
            #h11{text-align:center;}
            .p1{text-indent:2em;}
            .p2{color:red;}
            #li1{color:blue;}
            #li2{color:purple;}
            #li3{color:orange;}
            #li4{color:brown;}
            body{background:#ccc;}
        </style>
    </head>
    <body>
        <h1 id="h11">web开发前端工程师</h1>
        <p class="p1">Web前端开发工程师,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。</p>
        <p class="p1">一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。</p>
        <p class="p2">如何才能做得更好呢?</p>
        <ul>
            <li id="li1">必须掌握基本的Web前端开发技术,其中包括:CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等,在掌握这些技术的同时,还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。</li>
            <li id="li2">在一名合格的前端工程师的知识结构中,网站性能优化、SEO和服务器端的基础知识也是必须掌握的。</li>
            <li id="li3">必须学会运用各种工具进行辅助开发。</li>
            <li id="li4">除了要掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持,等等。</li>
        </ul>

    </body>
</html>

运行结果为:

原文地址:https://www.cnblogs.com/zuiranlanyan/p/10645036.html

时间: 2024-12-23 15:15:47

常见文本类css属性的相关文章

常见CSS属性及值

PHP程序员必须掌握的常见CSS属性及值: 一.内容简介: 1. 字体 2. 文本 3. 背景 4. 位置 5. 边框 6. 列表 7. 其他 二.CSS中修饰字体的属性 属性 描述 属性值 Font-family 字体族科 任意字体族科名称都可以使用Times.serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔开,以防止选择不存在的字体族科. Font-size 字体大小 可以使用绝对大小.相对大小.长度或百分比 Font-style 字体风格 Normal(普通).italic(斜

css文本换行相关属性及解释

本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: normal(默认) | break-word各个浏览器均能识别 参数: normal: 允许内容顶开指定

Day49:CSS属性操作(文本、背景、边框、列表、display、边距)

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 作者:webabcd介绍重新想象 Windows 8.1 Store Apps 之控件增强 文本类控件的增强 为一些控件增加了 Header 属性和 HeaderTemplate 属性 为一些控件增加了 PlaceholderText 属性 示例1.演示

CSS属性定义 文本修饰 边框效果 背景修饰

一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) hslhsla(h:色相,色环上(ppt78页)的角度值,0-360 s:饱和度,0-100% l:明度,0-100% a:不透明度,0-1之间的小数)color:hsla(30,100%,50%,0.8); 十六进制(一般格式为#ffffff)(字母范围从A-F,数字从0-9 ) opacity

css属性中常见的操作方法

css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(

CSS中常见的位置(position)属性

常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间,相对于其正常位置进行定位. 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素. absolute 绝对定位,不保留原空间,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", &q

Mozilla推荐的CSS属性书写顺序及命名规则

传说中的Mozilla推荐 Java代码   /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-alig

css属性分类介绍

css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性 CSS属性分类 文本/字体/颜色/背景 字体类 font-family:指定字体 需要考虑客户端机器上是否装有字体 可以排列多个字体,用逗号分隔,