`

css续-字体-文本-链接

 
阅读更多


晚上没有下载上模版 所以就看下css 样式了。
一般的css网站制作布局时常会遇到li点的情况,特别是对新手来说有点陌生,如何去掉<li></li>中的点呢,或者如何改变为数字1234 或者改成空心方块呢,其实很简单直接定义li的css为
li{
list-style-type:none;

如果要改变点的颜色,那么li里面的字也会变颜色与大小了,但你可以使用图片作为前面的点,
这样就可以随心所欲的装饰了
li{
    list-style:url("图片.gif") outside circle;

li点的其他用法css代码:
list-style-type:
disc 默认-实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小罗马数字
upper-roman 大罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号

inline-block:border 块会排列

css属性background 是上述所有与背景有关的缩写方法
使用background 属性可以减少属性的数目,因此令样式表更加简短易读
比如说下面五行代码
background-color:#FFCC66;
background-imae: url(“butterfly.gif”);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: right bottom;

如果使用background属性的话,实现同样的效果只需要一行代码即可
background :#FFCC66 url("图片.gif") no-repeat;
两个为指定的属性将设定为scroll和top left

字体: 由于字体不怎么重要 这里就简单看一下
用css来设置字体, 考虑网站上所选的字体仅当访问者的pc上安装有该字体才会被显示

font-family 字体家族
font-style 字体类型
font-variant 字体样式
font-weight  加粗字体
font-size 字体大小
font 字体
 
字体族font-family
css属性 font-family 的作用是设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表下一个字体,以此类推,知道列表中的某个字体是已安装的
有两种类型的名称可用于分类字体,字体族名字(family-name) 和族类名称(generic family)
字体族名称(family-name)
字体族名字就是我们所说的字体 例子包括Arial Times New Roman 宋体 黑体等
一个族类是一组具有统一外观的字体族,sans-serif 就是一例,他代表一组没有“脚”的字体(具体用到的不是很多,个人观点)

字体样式(font-style)
css属性font—style 定义所选字体的显示样式 normal 正常 italic 斜体 oblique 倾斜


5.文本
text—indent
text-align
text-decoration
letter-spacing
text-transform

文本缩进 text-indent
css属性text-indent 用于为段落设置首行缩进:以令其具有美观的格式,
下列 我们采用p元素的段落应用了30像素的首行缩进
P{
    text-indent: 30px;



文本对齐 text-align
css 属性text-align与html属性align的功能相同,该属性的值可以是left 左对齐
right右对齐 或者center 居中 除了上面三种选择以外,你还可以将该属性的值设为justify,即伸缩航中的文字以左右靠齐
th{
    text-align:right;
}
th{
    text-align:left;
}
th{
    text-align:center;
}

字符间距letter-spacing
css属性letter-spacing 用于设置文本的水平字间距 我们可以把期望的字间距宽度作为这个属性的值 例如 你希望p元素里的文本段落的字间距为三个像素而h1标题的字间距为六个像素代码可以这样写
h1{
    letter-spacing:6px;
}
p{
    letter-spacing:3px;
}

文本转换 : 暂略:


6 链接
通过伪类来控制  链接的状态(为访问的,已访问的,活动的,是否有鼠标悬停)

伪类是什么?

伪类 令你可以在为html元素定义css属性的时候将条件和事件考虑在内

例子:链接是通过a元素定义的 因此,css里面,我们可以将a作为一个选择器selector

a{
    color:blue;   
}
一个连接可以有不同的状态,

分享到:
评论

相关推荐

    Css样式--字体样式和链接样式详解

    在CSS样式中,字体样式和链接样式是两个重要的概念,它们允许我们自定义网页上的文本外观和链接行为。本文将详细解析这两个方面的内容。 首先,我们来看字体样式。CSS提供了丰富的选项来控制文本的视觉呈现。 1. *...

    html css led字体包

    通过引用`&lt;link&gt;`标签链接到`stylesheet.css`,并在HTML文本中使用特定的类或ID选择器,可以将LED字体样式应用到文本上。 4. `generator_config.txt`:这可能是一个配置文件,用于生成LED字体或控制字体显示的一些...

    html----渲染富文本

    富文本是指包含多种格式元素的文本,如字体、颜色、大小、链接、图片、列表、表格等,与纯文本相比,它能提供更加丰富和多样的展示效果。在网页设计中,富文本的渲染对于提升用户体验和信息传达效率至关重要。 在...

    纯html模板-css学习-宽窄页面设计-简单的黑色博客CSS模板-简单 黑色 博客 二栏 窄.zip

    首先,我们要了解HTML(超文本标记语言)和CSS的基础。HTML是网页内容的结构框架,通过不同的标签来定义各种元素,如标题、段落、链接等。CSS则负责网页的视觉呈现,它允许我们定义颜色、字体、布局和元素样式。在这...

    CSS--层叠样式表(DOC版)

    4. **将样式表加入到HTML中**:学习如何将CSS插入到HTML文档中,包括内联样式、内部样式表(使用`&lt;style&gt;`标签)和外部样式表(链接CSS文件)这三种常见方式,以及它们各自的优缺点。 5. **依赖样式表**:理解过度...

    Css样式 -实例练习

    最后,我们将使用CSS选择器来控制不同状态下的链接样式,包括`a:link`、`a:hover`、`a:active`和`a:visited`。 **步骤1:设置链接样式** 1. 在`wz1.css`中添加或更新以下规则: ```css a:link { font-family: ...

    css3-button.

    8. **自定义字体和图标**:使用`@font-face`规则可以引入自定义字体,让按钮的文本更独特。结合`content`和`unicode-range`属性,还可以添加图标字体,提供更丰富的视觉表现。 9. **响应式设计**:通过媒体查询(`...

    个人web简历-简单css模板-纯html模板下载-简历 个人 html.zip

    2. 可定制化:通过修改CSS,可以轻松调整模板的颜色方案、字体和其他视觉元素,使其与个人品牌或喜好相符。 3. 适应性:良好的HTML和CSS设计可以使简历在不同设备上显示良好,如手机和平板电脑。 4. 易于分享:将...

    CSS--网页使用代码.pdf

    例如,要设置所有链接在鼠标悬停时变为蓝色,可以使用以下CSS代码: ```css a:hover { color: blue; } ``` 通过理解并熟练掌握CSS,开发者能够创建美观、响应式的网页,并且随着CSS3的出现,更多的动画效果、多列...

    前端开源库-get-css-urls

    `get-css-urls`是一个开源库,专为开发者提供了一种高效的方法,用于从CSS字符串中提取URL链接。这个库主要服务于那些需要解析、操作或处理CSS文件中的URL的场景,比如静态资源的自动化构建流程、CDN部署或者CSS预...

    css入门-绝对经典

    - **外部样式表**:创建一个`.css`文件,然后在HTML中通过`&lt;link&gt;`标签链接到这个文件,这样样式可以被多个页面共享。 2. **选择符、属性和值**: - **选择符**:例如`p`代表所有段落,`#id`针对ID选择器,`....

    css-cheat-sheet-v2.pdf

    ### CSS Cheat Sheet V2知识点详解 #### 概述 CSS(Cascading Style Sheets)是一种样式表语言,用于描述文档的呈现方式。本备忘单("css-cheat-sheet-v2.pdf")提供了CSS中一系列重要的属性、选择器以及单位等基础...

    Html5+Css3-手机App实例

    5. 自定义字体和文字渲染:通过@font-face引入自定义字体,以及text-rendering属性优化文字渲染。 6. 背景与边框:支持多背景层、渐变、圆角边框等,使设计更加丰富多彩。 在“Html5+Css3-手机App实例”中,你可能...

    CSS3-标签集合.pdf

    总之,CSS3标签集合不仅扩展了选择器和样式定义的多样性,还在文本、字体、颜色和布局等方面提供了更丰富的控制,使网页设计更加生动和专业。学习并掌握这些知识点,对于创建现代、响应式和美观的网页至关重要。

    CSS的字体与文本属性详解

    `italic`和`oblique`都可以让字体倾斜,区别在于`italic`通常是字体设计师为特定字体设计的斜体样式,而`oblique`是通过将正常字体文本斜向拉伸制作的模拟效果。例如: ```css em { font-style: italic; } ``` ...

    曹鹏CSS视频教程-37.文本装饰.rar

    文本装饰.rar”中,我们将深入探讨CSS中的文本装饰技术,这是创建吸引人的、具有专业外观的网页所必不可少的知识点。CSS(层叠样式表)是现代网页设计的核心,它赋予网页结构与美学的统一,让网页不仅功能强大而且...

    百度空间CSS教程--5、6十个网站

    根据提供的标题、描述以及部分链接内容,我们可以推断这是一系列关于百度空间CSS教程的文章集合。这些文章旨在帮助初学者逐步掌握CSS技能,并通过实践应用加深理解。下面将基于这些信息整理出相关的CSS知识点。 ###...

    html-css-网页模板-产品介绍-自行车

    开发者只需要更新HTML文件中的文本和图片链接,调整CSS样式以匹配品牌风格,就可以快速创建一个具有吸引力的产品页面。此外,由于模板通常会考虑响应式设计,所以这个模板也应该能在不同设备和屏幕尺寸上良好显示,...

    html-css-网页模板-团队介绍

    HTML负责构建网页的内容结构,如标题、段落、图片链接等,而CSS则用来定义这些元素的外观,包括颜色、字体、布局和响应式设计,确保在不同设备上都能良好显示。 【标签】"html-css-网页模板-团队" 提示我们这个模板...

    html-css-网页模板-美食

    HTML负责构建网页的基本结构,包括文本、图像、链接等元素,而CSS则用来定义这些元素的样式,如颜色、字体、布局等,以实现美观的视觉效果。美食主题表明模板将特别关注食物的展示,可能包括色彩丰富的图片、易于...

Global site tag (gtag.js) - Google Analytics