快速自学java编程高级语言干货笔记 -初识CSS样式

初识CSS

前端的组成:
结构语言:HTML(涉及到布局设计)
表现语言:CSS(装修)
行为语言:JavaScript(装点电梯。。。什么的功能)

1.了解CSS

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

它是用来给我们的HTML做美化的,事实上HTML也能做一些美化,但是为什么单独提出来CSS呢? 我们要降低耦合性,面向对象
CSS样式非常丰富,这是HTML不可比拟的
CSS文件格式: .CSS

2.掌握CSS的基本语法

// 选择器:选中要美化的元素
// 声明:就是要给选中的元素美化什么?美化成啥样?
选择器{
    声明1; // 属性名:属性值;
    声明2;
    声明3
}

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

<style>
	p{
   		 color:red;
	}
</style>

3.掌握CSS的引入方式

  • 行内样式表: 直接在标签中通过style属性设置样式,每一个HTML标签都有此属性。
<!-- 行内样式表
	优点:直接 直观
	缺点:耦合导致阅读困难、它只能对单个标签设立样式
-->
<h3 style="color: red;">夏日绝句</h3>
  • 内部样式表:head标签中添加style标签,然后编写完整的CSS语法。
<!-- 内部样式表 -->
<style type="text/css">
    h3{
        color: yellow;
    }
</style>
  • 外部样式表: 本项目中的CSS文件 公网的CSS连接(CDN加速)
<!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对,也可以在其他服务器上)  -->
<!-- [最常用]它是多种CSS引入方式中最常用的    它也是外部样式表引入的最常用的-->
<link rel="stylesheet" type="text/css" href="css/index.css"/>


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

这是两种导入方法,本人建议使用第一种!
三种引入方式的优先级: 行内样式表优先级最高 > 内部样式表和外部样式表谁在后面,谁的优先级高(代码是由上而下执行的,后面相同的设置会覆盖掉前面的设置)

4.掌握CSS的基本选择器

CSS中有三大基本选择器:

  • 标签选择器: 标签名就作为一种选择器,表示给对应的标签统一设置样式。
/* 标签选择器 */
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选择器 > 类选择器 > 标签选择器

5.掌握CSS的初级美化

5.1 字体美化

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

5.2 文本美化

  • 文本颜色:color

    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;*/
    }
    

块元素和行内元素:

在标准文档流中,我们的HTML内的元素可以分为两大派。
  • 块元素:独占一行、可以设置宽度和高度等信息。例如:div p h1-h6…

  • 行内元素:多个行内元素可以在一行展示内容,它不可以设置宽度和高度等信息,内容撑开宽度和高度。 a image span…

  • 文本缩进: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;
    }
    

5.3 超链接美化

伪类选择器,可以应用其他的标签,但是常用于a标签。

选择器:伪类选择器名
示例:	a:hover 当鼠标悬浮在超链接标签上时触发选中
  • hover 可以设置鼠标悬浮在超链接上的样式

    /* 鼠标悬浮其上时触发选中 */
    a:hover{
        text-decoration: underline;
        color: orange;
    }
    
  • linked 可以设置超链接未点击前的样式(等价于标签选择器直接设置)

  • visited 可以设置超链接被点击后的样式

  • active 可以设置超链接被点击但还未释放的样式

5.4 鼠标指针

  • 小手型指针

    /* pointer 小手 */
    cursor: pointer;
    
  • wait 加载中

  • help 帮助带问号

  • text 文本光标型

  • crosshair 十字型

  • default 默认光标样式

5.5 背景美化

  • 背景颜色设置: background-color

  • 背景图片: background-image

  • 背景尺寸: background-size

  • 背景平铺: background-repeat

  • 背景定位: background-position

  • 背景属性: background

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

6. 掌握列表的使用

在HTML中为我们准备了三种列表形式:无序列表,有序列表,定义列表。

  • 无序列表:以符号为前缀的列表 (应用最广是a标签之外的最常用的)

    <!-- 无序列表  默认带一个实心圆点 -->
    <!-- ul声明无序列表  ul标签内只能写li标签 -->
    <!--<ul type="square">-->
    <ul>
        <!-- li列表项 -->
        <li>蔡英文为2020大选大肆组织台独</li>
        <li>蔡徐坤幕后推手出炉</li>
        <li>蔡浩然明天将组织英语朗读</li>
        <li>蔡雷...</li>
    </ul>
    
  • 有序列表:以有序的数字或者有序的符号(I II III A B C D)

    <!-- 有序列表 默认为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;*/
}

猜你喜欢

转载自blog.csdn.net/weixin_44793608/article/details/92767355