首页 > 其他分享> > 三十四 CSS

三十四 CSS

2019-06-12 14:03:39 作者：互联网

三十四章—初识CSS

一了解CSS

CSS:Cascading Style Sheet级联/层叠样式

它是用来给我们的HTML做美化，事实上HTML也能做一些美化，但是为啥单独提出来CSS呢，因为降低耦合性，面向对象

CSS的样式非常丰富，这是HTML不可比拟的。

CSS的文件格式：.css

二掌握CSS的基本语法

/* 选择器：选中要美化的元素
   声明：就是给选中的元素美化什么？美化成啥样？*/

选择器{
    声明1; /* 属性名：属性值*/
    声明2;
    声明3;
    声明4
}


/*示例：要求将p标签内的字体颜色设置为红色*/

p{
    color：red;
}

CSS使用实例：

<!-- HTML中 标签都有特别的含义 我们如果想编写CSS代码就需要在特别的标签中使用 -->
<!--
	style标签是用来专门编写CSS样式代码的
规范来讲它需要放置在head标签内
-->
<style>
    h3{
        /* 设置字体颜色为红色 */
        color:red;
    }
</style>

三掌握CSS的引入方式

A 行内样式表–直接在标签中通过style属性设置样式每一个HTML标签都有此属性

直接在标签中通过style属性设置样式每一个HTML标签都有此属性

优点：直接

缺点：耦合导致阅读困难。他只是对单个标签设立样式

<!-- 行内样式表
	优点：直接 直观
	缺点：耦合导致阅读困难、它只能对单个标签设立样式
-->
<h3 style="color: red;">夏日绝句</h3>

**B 内部样式表：在head标签中添加style标签，然后编写完整的css语法 **

<!-- 内部样式表 -->
<style type="text/css">
    h3{
        color: yellow;
    }
</style>

C外部样式表：

1.本项目中的css文件

2.在公网中的css链接（CSDN加速）

<!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对，也可以在其他服务器上)  -->
<!-- [最常用]它是多种CSS引入方式中最常用的    它也是外部样式表引入的最常用的-->
<!--<link rel="stylesheet" type="text/css" href="css/index.css"/>-->

<style type="text/css">
    
    /* CSS语法 用来引入外部样式文件时 如果出现不兼容CSS 2.x语法时 将无法使用 */
    @import url("css/index.css");
    
</style>

三种引入方式的优先级:

行内样式优先级最高–内部样式表和外部样式表谁在后面谁优先级最高（代码由上而下执行的，后面的相同设置会覆盖前面的）

四掌握CSS的基本选择器

CSS中有三大基本选择器：

标签选择器 ：标签名就作为一种选择器，表示给对应的标签统一设置样式例如：h2 p

/* 标签选择器 */
h3{
    color: deeppink;
}

p{
    font-weight: bold;
}

类选择器：需要借助标签的class属性(应用最广泛的基本选择器)

/* 类选择器：.标签的class属性值 */
.poem{
    font-weight: bold;
}

.hehe{
    color: red;
}

<div>
    <h3>夏日绝句</h3>
    <!--  如果应用多个类选择器 可以以空格隔开 -->
    <p class="poem hehe">
        生当作人杰，死亦为鬼雄。<br/>
        至今思项羽，不肯过江东。
    </p>
    <p class="hehe">
        呵呵
    </p>
    <p class="poem">
        哈哈
    </p>
</div>

ID选择器：需要借助标签哦的id属性 (不常用)

/* ID选择器 */
#poem{
    color: greenyellow;
}

<!-- 严格来讲id选择器应该是唯一的  但是因为HTML是弱语法  所以你会发现ID选择器可以实现和类选择器一样的效果 -->
<p id="poem">
    生当作人杰，死亦为鬼雄。<br/>
    至今思项羽，不肯过江东。
</p>

基本选择器的优先级(范围越小优先级越高)：ID选择器 -> 类选择器 - >标签选择器

五掌握CSS的初级美化

1.字体美化

font字体属性顺序：风格–粗细–大小–类型

属性名	含义	举例
font-familly	设置字体类型	font-familly：“隶书”;
font-size	设置字体大小	font-size：12px;
font-style	设置字体风格	font-style:italic–倾斜;
font-weight	设置字体粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 12px;

字体类型：font-family

h3{
    /*font-family: "楷体";*/
    /*font-family: "宋体";*/
    /*font-family: "\u5b8b\u4f53";*/
    /* 如果这样设置是为了防止当前面的字体无法使用时  可以作为替换性内容 */
    /* 一般会对中文和英文分别设置字体 */
    
    font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
}

font-size: 16px;

字体风格：font-style

h3{
    /* 默认的 */
    /*font-style: normal;*/
    /* 采用字体原有的斜体设计 */
    /*font-style: italic;*/
    /* 采用固定的倾斜角度对字体倾斜 */
    /*font-style: oblique;*/
}

字体的粗细:font-weight

p{
    /*font-weight: bold;*/
    /* 加粗 */
    /*font-weight: 700;*/
    /* 更细的 */
    font-weight: lighter;
    font-weight: normal;
}

一个字体属性所有的字体样式：font

body{
    /*font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;*/
    /* font-size: 12px/（行高）line-height: 1.5; */
    font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
}

2.文本美化

文本颜色：color

/* 1.使用英文单词 */
 
red green blue yellow...

/* 2.使用十六进制数字表示 */
0-9 A B C D E F 
RGB = Red Green Blue
00ff00 = 绿色

p{
    /* 可以使用关键字作为颜色值 */
    /*color: orangered;*/
    /* 可以使用16进制颜色值 */
    /*color: #D3C294;*/
    /* 配置三原色 红色 绿色  蓝色 */
    /*color: rgb(255,0,0);*/
    /*color: rgb(255,125,0);*/
    /* alpha 透明度 0 - 1之间  值越大透明度越低  */
    color: rgba(255,0,0,0.1);
}

文本的对齐方式：text-align （必须保证要设置的对齐文字是处于块元素内的）

p{
    /*text-align: left;*/
    /*text-align: right;*/
    /*text-align: center;*/
    /* 两端对齐 */
    /*text-align: justify;*/
}

文本缩进:text-indent

p{
    font-size: 16px;
    /* 缩进 你根据字体大小计算缩进值 */
    /* px是绝对单位 */
    /*text-indent: 32px;*/
    /* em是相对单位 它会以当前字体大小进行计算 */
    text-indent: 2em;
}

文本行高（行间距）：line-height

line-height: 30px;

**文本装饰：text-decoration **

span{
    /* 下划线 */
    /*text-decoration: underline;*/
    /* 上划线 */
    /*text-decoration: overline;*/
    /* 删除线：中划线 */
    /*text-decoration: line-through;*/
    /* 普通文字默认情况下为none */
    text-decoration: none;
}

a{
    /* 超链接标签默认文字拥有下划线  一般我们会对其进行下划线去除 */
    text-decoration: none;
}

块元素和行内元素

在标准文档流中,我们的HTML元素可以分为两大派

块元素：特点独占一行，可以设置宽度和高度等信息
行内元素：多个行内元素可以在一行展示内容，他不可以设置宽度和高度信息，内容撑开宽度和高度。a image span…

3.超链接美化

伪类选择器，可以应用其他的标签，按市场用于a标签

选择器:伪类选择器名
示例：	a:hover 当鼠标悬浮在超链接标签上时触发选中

hover 可以设置鼠标悬浮在超链接上的样式

/*伪类样式：
鼠标悬浮其上时触发选中
标签名：伪类名{声明;}*/

a:hover{
    color:#00ff00;
    text-decoration:underline(下划线);
}

伪类名称	含义	示例
a:link	未单击访问时超链接样式(未访问前)	a:link{color:#red;}
a:visited	单击访问后超链接样式（访问后的）	a:visited{color:#red;}
a:hover	鼠标悬浮其上的超链接样式（鼠标移上去）	a:hover{color:#red;}
a:active	鼠标单击释放的超链接样式（点击鼠标时的）	a:active{color:#red;}

4.鼠标指针

小手型


/* pointer 小手*/
cursor:pointer

wait 加载中
help 帮助带问号
text 文本光标型
crosshair 十字型
default 默认光标样式

5.背景美化

背景颜色设置：background-color
背景图片：background-image
背景尺寸：background-size
背景平铺：background-repeat
背景定位：background-position
背景属性：background

background: url(img/arrow-right.gif) no-repeat 170px center;

六掌握列表的使用

在HTML中准备了三种列表形式：无序列表，有序列表，定义列表

无序列表：以符号为前缀的列表（应用最广是a标签之外的最常用的）

<!-- 无序列表  默认带一个实心圆点 -->
<!-- ul声明无序列表  ul标签内只能写li标签 -->
<!--<ul type="square">-->
<ul>
    <!-- li列表项 -->
    <li>蔡英文为2020大选大肆组织台独</li>
    <li>蔡徐坤幕后推手出炉</li>
    <li>蔡浩然明天将组织英语朗读</li>
    <li>蔡雷...</li>
</ul>

有序列表：以有序的数字或者有序的符号

<!-- 有序列表 默认为1. 2. 3.有序数列前缀 -->
<ol>
    <li>蔡英文为2020大选大肆组织台独</li>
    <li>蔡徐坤幕后推手出炉</li>
    <li>蔡浩然明天将组织英语朗读</li>
    <li>蔡雷...</li>
</ol>

定义列表：带小标题形式

<dl>
    <!-- 标题 -->
    <dt>水果</dt>
    <!-- 标题下的列表 -->
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
    <dd>胡萝卜</dd>
    <dt>蔬菜</dt>
    <dd>西红柿</dd>
    <dd>黄瓜</dd>
    <dd>冬瓜</dd>
    <dd>南瓜</dd>
</dl>

对于列表的其他,CSS有专门的属性

ul{
    /* 它其实是三个子属性的集合体  但是通常用它来去除列表前缀符号 */
    list-style: none;
    /*list-style: amharic;*/
}

标签：color,标签,三十四,text,font,选择器,CSS
来源： https://blog.csdn.net/L097_/article/details/91512291

三十四 CSS

三十四章—初识CSS

一 了解CSS

二 掌握CSS的基本语法

三 掌握CSS的引入方式

四 掌握CSS的基本选择器

五 掌握CSS的初级美化