Css基础内容

2023-12-28 18:32:26

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8" />

? ? <title>CSS</title>

? ? <!-- <link rel="stylesheet" href="Html5与Css3\CSS\my.css"> -->

? ? <!-- link引入外部样式表:rel:关系.样式表,敲完link直接按回车就行 -->

? ? <!-- <style>

? ? ? ? /* 写css代码 */

? ? ? ? ?p{

? ? ? ? ? ? color:red

? ? ? ? }

? ? </style> -->

</head>

<body>

? ? <!-- css的定义:css就是层叠样式表是一种样式表语言,用来描述html文档的呈现美化内容

? ? 书写位置:title标签下方添加style双标签,style标签里面书写css代码

? ? 规则:选择器{属性名:属性值;}

? ? -->

? ? <p>体验css</p>

? ? <!-- <div style='color:red;font-size:20px'>这是div标签</div> -->

? ? ?<!--用css把段落变红 ?-->

? ? ?<!-- CSS引入方式

? ? 内部样式表:css代码写在style标签里面

? ? 外部样式表:css代码写在单独的css文件中(.css),在html使用link标签引入

? ? <link rel = 'stylesheet'href='./my.css'>

? ?

? ? 行内样式:配合JavaScript使用,写在标签的style属性值里

? ? <div style='color:red;font-size:20px'>这是div标签</div>

? ? -->

? ? <!-- 选择器

? ? 作用:查找标签,设置样式

? ?

? ? 1.标签选择器:使用标签名作为选择器,选中同名标签设置相同样式

? ? 2.类选择器:查找标签,差异化设置标签的显示效果

? ? 特点:一个类选择器可以给多个标签使用,一个标签可以使用多个类名,类名用空格隔开

? ? 注意:类名自定义,尽量用英文命名

? ? 开发习惯:类名见面知意,多个单词用-连接

? ? 步骤:定义类选择器 .类名

? ? 使用类选择器 标签添加class='类名'

? ? <style>

? ? ? ? .red{

? ? ? ? ? ? color:red;

? ? ? ? }

? ? </style>

? ? 如<div class='red'>变红</div>

? ? 3.id选择器:

? ? 查找标签,差异化设置标签的显示效果

? ? id选择器一般配合JavaScript使用,很少用来设置css样式

? ? 步骤:

? ? 定义id选择器:#id名

? ? 使用id选择器:标签添加id='id名'

? ? #id{

? ? ? ? color:red;

? ? }

? ? 4.通配符选择器:

? ? 通配符选择器:*,不需要调用,浏览器自动查找页面所以标签,设置相同的样式

? ? *{

? ? ? ? color:red;

? ? }

? ? -->

? ? <!-- 画盒子

? ? 属性:

? ? width:宽度

? ? height:高度

? ? background-color:背景色

? ? -->

? ? <!-- 网页的文字效果

? ? 字体大小:font-size

? ? 属性值:文字尺寸,常用单位是px

? ? 属性必须有单位,否则不生效

? ? {

? ? ? ? font-size:30px;

? ? }

? ?

? ? 字体粗细:font-weight

? ? 属性值:数字或关键字

? ? 正常:normal / 400

? ? 加粗:bold / 700

? ? {

? ? ? ? font-weight:400;

? ? }

? ? 字体倾斜:font-style

? ? 属性值:

? ? 正常:normal

? ? .text

? ? {

? ? color:red;

? ? font-size: 30px;

? ? font-style: normal;

? ? }

? ? .text1

? ? {

? ? color:blue;

? ? font-weight:400;

? ? font-style:italic;

? ? }

? ?

? ? 行高:line-height

? ? 行高的测量方法:从一行文字的最顶端量到下一行文字的最顶端

? ? 作用:设置多行文本的间距

? ? 属性名:line-height

? ? 属性值:

? ? 数字+px

? ? 数字(当前标签font-size属性值的倍数)

? ?

? ? .text2

? ? {

? ? line-height: 50px;

? ? }

? ? 垂直居中技巧:行高属性值等于盒子高度属性值(只适用于单行文字)

? ? 字体族:font-family

? ? 属性值:字体名

? ? 可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找,属性最后设置一个字体族名,网页开发建议使用五衬线字体

? ? .text2{

? ? font-family: 楷体;;

? ? }

? ? 字体复合属性:font

? ? 使用场景:设置网页文字公共样式

? ? 复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开

? ? font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

? ? 注意:字号和字体值必须书写,否则font属性不生效

? ? div{

? ? ? ? font:italic 700 30px/2 楷体

? ? }

? ? 文本缩进:text-indent

? ? 属性值:

? ? 数字+px

? ? 数字+em(推荐:1em = 当前标签的字号大小)

? ? p{

? ? ? ? text-indent:2em;

? ? }

? ? 文本对齐:text-align

? ? 作用:控制内容水平对齐方式

? ? 居中的是文字内容而不是标签

? ? 属性值:

? ? left:左对齐

? ? center:居中对齐

? ? right:右对齐

? ? {

? ? ? ? text-align:center;

? ? }

? ? 水平对齐方式-图片

? ? text-align本质是控制内容的对齐方式,属性要设置给内容的父级

? ? <style>

? ? ? ? div{

? ? ? ? ? ? text-align:center;

? ? ? ? }

? ? </style>

? ? <div>

? ? ? ? <img>

? ? </div>

? ? 修饰线:text-decoration

? ? 属性值:

? ? none:去掉下划线

? ? underline:下划线

? ? line-through:删除线

? ? overline:上划线

? ? 颜色:color

? ? 属性值:

? ? 颜色关键字:颜色英文单词:red,green,blue等

? ? rgb表示法:rgb(r,g,b):r,g,b表示红绿蓝三原色,取值:0-255

? ? rgba表示法:rgb(r,g,b,a):a表示透明度,取值:0-1

? ? 十六进制表示法:#RRGGBB:#000000,#ffcc00,简写:#000,#fc0

? ? a{

? ? text-decoration: none;

? ? /* color:red; */

? ? /* color:rgb(0, 100, 0); */

? ? /* color:rgba(1, 0, 0, 0.3); */

? ? color:#ff0000;

}

? ? -->

? ? <!--调试工具

? ? 作用:检查,调试代码;帮助程序员发现代码问题,解决问题

? ? 1.打开调试工具

? ? 浏览器窗口任意位置/选中标签 ——>鼠标右键——>检查

? ? F12

? ? 2.使用调试工具

? ? 细节:

? ? 1.如果是错误的属性,有黄色感叹号

? ? 2.css属性的前面有多选框,如果勾选,这个属性生效,如果没有勾选这个属性不生效

? ? -->

? ? <p class="text">测试下划线</p>

? ? <p class="text1">测试2删除线</p>

? ? <p class="text2">上划线aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

? ? aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

? ? <a href="#">没有下划线</a>

</body>

</html>

文章来源:https://blog.csdn.net/m0_59745705/article/details/135275473
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。