初识CSS
发布日期:2022-02-24 01:06:57 浏览次数:4 分类:技术文章

本文共 2228 字,大约阅读时间需要 7 分钟。

初识CSS

1、css具体格式:

选择器{属性1:属性值;属性2:属性值;…}
2、css代码具体特点:
(1)、css样式中的选择器严格区分大小写,一般习惯用小写
(2)、多属性之间要用英文分号(;)隔开,最后一个可以省略,但最好保留(为了便于增加新属性)
(3)、如属性值含有多个单词,需用空格隔开,该属性值需要用英文引号("")
(4)、在编写css代码时,为了提高代码的可读性,通常会加上css注释(//)
(5)、css格式最好进行排版,提高可读性
ex:h1{
height:10px;
width:10px;
}
注意:属性的值与单位之间不能存在空格。
3、引入css样式表(3种)
(1)、行内式
<标记名 style=“属性1:属性值; 属性2:属性值;”>内容
(2)、内嵌式(内部样式)
css代码集中于head头部标记中,并且用
(3)、链入式(外部样式)
css代码集中于一个以.css为扩展名的外部样式表文件中,通过标记链接到HTML文档中
标记放在标记中,link标记有三个属性:
(1)、href:属性值为外部样式表文件的url,相对路径或绝对路径
(2)、type:属性值为text/css 表示链接的为css样式表
(3)、rel:属性值为sheetstyle 表示链接的文档是样式表文件
4、css基础选择器(7种)
(1)、标记选择器
标记名{
属性:属性值;
属性:属性值;
}
(2)、类选择器
.类名{
属性:属性值;
属性:属性值;
}

(3)、id选择器
#id名{
属性:属性值;
属性:属性值;
}

(4)、通配符选择器(HTML文档所有元素都有效)
*{
属性:属性值;
属性:属性值;
}
(5)、标签指定式选择器
第一个为标记选择器,第二个为class或id选择器
用于选择有该标记和该class或id
p.class 或 p#id{
属性:属性值;
属性:属性值;
}
(6)、并集选择器
h1,h2,h3,p,.class,#id{
属性:属性值;
属性:属性值;
}
(7)、后代选择器
外层标记写前面,内层标记写外面,中间用空格隔开。标记嵌套时,内层标记为外层标记的后代
p strong{
属性:属性值;
属性:属性值;
}
strong标记里的内容发生变化
5、文本样式属性
(1)、font-size:字号大小 常用px
(2)、font-family:字体 font-family:“华文彩云”
(3)、font-weight:字体粗细
属性值有bord(粗)、border(更粗)、lighter(更细)、100~900(400等于默认;700等于bord)
(4)、font-style:字体风格
属性值有normal(默认)、italic(斜体){常用}、oblique(倾斜)
(5)、font:综合设置字体样式
选择器{font:font-style font-weight font-size font-family}
必须保留font-size和font-family,其余的可以不写(默认值)
(6)、@font-face属性(服务器字体须在网上下载)
@font-face{
font-family:自定义;
src:url(路径)
}
p{
font-family:上面自定义的名字;
font-size:px;
}
(7)、word-wrap属性
选择器{
word-wrap:属性值;
}
属性值有normal(默认)、break-word(进行自动换行)
6、文本外观属性
(1)、color:文本颜色
取值3种:
>预定义颜色:red、blue等
>十六进制 最常见
>RGB代码
(2)、letter-spacing:字间距
允许用负值;若为英文,控制字母之间的间距
(3)、word-spacing:单词间距
允许用负值
(4)、line-height:行间距
常用px
(5)、text-transform:文本转换
该属性用于控制英文字符的大小写。属性值如下:
none:不转换(默认)
capitalize:首字母大写
uppercase:全部大写
lowercase:全部小写
(6)、text-decoration:文本装饰
上划线、下划线、删除线装饰
none:不转换(默认)
underline:下划线
overline:上划线
line-through:删除线
(7)、text-align:水平对齐方式
left:左对齐(默认)
right:右对齐
center:居中对齐
(8)、text-indent:首行缩进
允许用负值;单位有em、百分比、px。建议用em,为字符几倍
(9)、white-space:空白符处理
属性值如下:
normal:常规(默认),空格、空行无效,满行自动换行
pre:空格、空行有效
nowrap:空格、空行无效,不遇见
不换行,满行出现滚动条
(10)、text-shadow:阴影效果
选择器{text-shadow:h-shadow v-shadow blur color;}
分别为水平阴影、垂直阴影、半径、颜色
(11)、text-overflow:标识对象内溢出文本
取值
clip:修剪溢出文本,不显示"…"
ellipsis:用"…"代替修剪文本,省略标记插入位置为最后一个字符

转载地址:https://blog.csdn.net/weixin_45878630/article/details/108956690 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:链表与顺序表区别
下一篇:2020-10-13

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月08日 06时11分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

手写一个promise用法_手写系列之实现一个Promise 2019-04-21
数字拆分问题算法回溯_学会了回溯算法,我终于会做数独了 2019-04-21
广州刷脸支付骗局_刷脸支付是骗局?那可能你还不了解刷脸支付 2019-04-21
卸载源码安装的mysql_源码安装与卸载mysql 2019-04-21
mysql查询当天记录_sql查询当天记录 2019-04-21
java 远程调试 端口_JAVA远程调试 2019-04-21
java 获取 html 图片路径_JAVA-替换html中图片的路径-从html代码中提取图片路径并下载(完整版)... 2019-04-21
java redis 面试题_Java面试题(Redis篇) 2019-04-21
java 正则表达式分类功能_JAVA正则表达式4种常用功能 2019-04-21
java3d立方体_3d立方体贴图 2019-04-21
java ajax教程_(转)JAVA AJAX教程第三章—AJAX详细讲解 2019-04-21
java operators_A guide to Java Operators 2019-04-21
java socket调试_JAVA实现SOCKET多客户端通信的案例 2019-04-21
java 使用或覆盖了已过时的api_JAVA使用或覆盖了已过时的 API 2019-04-21
java 图片旋转保存_Java 对图片90度旋转 2019-04-21
用java实现文学研究助手_数据结构文学研究助手 C语言代码实现(带源码+解析)... 2019-04-21
java gc的几种方式_GC 的三种基本实现方式 2019-04-21
wget linux java 32_通过wget在Linux上下载Java JDK会显示在许可证页面上 2019-04-21
babylonjs 设置面板位置_babylonjs 空间坐标转为屏幕坐标 2019-04-21
oracle里面如何查询sqlid,CSS_oracle中如何查看sql, --查询表状态:  select uo.O - phpStudy... 2019-04-21