JAVA前端————CSS—字体—选择器

最新推荐文章于 2022-07-18 17:18:06 发布

追JAVA的小菜鸟

最新推荐文章于 2022-07-18 17:18:06 发布

阅读量454

点赞数 1

分类专栏： Java前端文章标签： css css3 javaee

本文链接：https://blog.csdn.net/qq_45673367/article/details/103860958

版权

Java前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS

Cascading Style Sheet——层叠级联样式表
作用：美化界面（字体大小样式图片宽高边距样式）使结构和样式分离实现了HTML只做结构 CSS只做样式
优点
1. 内容和表现分离
1. 网页结构表现统一可以实现复用
1. 样式丰富

三种导入格式

内部样式：< style> h1{ } < /style>
外部样式：< link rel=“stylesheet” href=“css的路径” >
行内样式：< h1 style=“color:red;”>我是标题< /h1>

——————————HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个练习网页</title>
    <link rel="stylesheet" href="../CSS/字体颜色.css">
</head>
<body>
<h1>这是一个大标题</h1>
</body>
</html>

——————————CSS

h1 {
    color: aquamarine;
    font-size: larger;
}

字体

参数：large-大 small-小

font—family：字体样式 eg：宋体微软雅黑（默认）
注意事项

一般正文大小为14px（尽量使用偶数）
中文字体格式需要加引号英文不用
设置多个字体样式时英文在中文前面逗号隔开

字体粗细

font—weight——————多用数字表示：100-900

参数：normal-正常——400
bold-粗体——700
bloder-更粗的
lighter-更细的

字体风格

font—style

参数：normal——正常字体
italic——斜体或者用em标签

字体综合设定

格式：选择器{ font-style font-weight font-size font-family}

 font: italic bolder 14px "黑体";

注意：前面的可以省略必须有size和family

选择器

基本选择器

定义：选择一类标签

h2{
    color: darkblue;
    font-size: 30px;
    font-family: "宋体";
}

Class类选择器

格式：定义一个类class=“open” 选择class的名称 .类名称
定义：可以多个标签归类同一个类可以重复使用

.nvzhu{
    color: #800418;
    font-size: large;
    font-weight: bolder;
}

多类名：组合自由用空格隔开不分前后顺序
格式：class=“zhu zi”

<div class="zhu zi">范闲</div>
<div class="zhu">林婉儿</div>
<div class="pei zi">庆帝</div>
<div class="pei">陈萍萍</div>

ID选择器

格式：定义一个id id=“one” 选择id的名称 #id名称
定义：全局唯一

#yellow{
    color: orange;
}

通配符选择器

格式：*{ }
定义：选中所有的元素

*{
     font-family: "微软雅黑 Light";
 }

层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

1. 后代选择器

格式：p ———— 选出某个元素后面所有元素

2. 子选择器

格式：>p ———— 选出某个元素的子代一个元素

3. 相邻兄弟选择器

格式：. 类名 + p ———— 选出某个元素相邻的一个元素
注意：要定义class

4. 通用选择器

格式：>p ———— 选出某个元素相邻的所有元素
注意：要定义class

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body ul{     /*选出所有子代*/
            color: red;
        }
        body >ul{      /*只选出子代一个*/
            color: blue;
        }
        .san +li{       /*只选出指定的相邻下一个*/
            color: green;
        }
        .ding ~li{       /*选出指定的相邻所有*/
            color: aqua;
        }
    </style>
</head>
<body>
<ul>
    <li>一级甲等</li>
    <ul>
        <li>二级甲等</li>
        <ul>
            <li class="san">三级甲1等</li>
            <li>三级甲2等</li>
            <li>三级甲3等</li>
        </ul>
    </ul>
    <li>一级乙等</li>
    <ul>
        <li>二级乙等</li>
    </ul>
    <li>一级丙等</li>
    <ul>
        <li>二级丙等</li>
        <ul>
            <li>三级丙等</li>
        </ul>
    </ul>
    <li>一级丁等</li>
    <ul>
        <li class="ding">二级丁1等</li>
        <li>二级丁2等</li>
        <li>二级丁3等</li>
        <li>二级丁4等</li>
        <li>二级丁5等</li>
    </ul>
</ul>
</body>
</html>

伪类选择器

伪类选择器分为链接伪类选择器结构伪类选择器目标伪类选择器

链接伪类选择器

a:link————未访问过的链接
a:visited————已访问过的链接（不常用）
a:hover————鼠标放在链接上
a:active————鼠标点击未松开时（不常用）
注意：一定按顺序写可以省略

a:link{
    font-size: 20px;
    color: aqua;
    font-weight: 700;
}
a:visited{
    font-size: 20px;
    color: blue;
    font-weight: 700;
}
a:hover{
    font-size: 20px;
    color: yellow;
    font-weight: 700;
}
a:active{
    font-size: 20px;
    color: #0c9700;
    font-weight: 700;
}

结构伪类选择器———— 在ul-li中使用

：first-child————其父元素的首个子元素
：last-child————其父元素的最后一个子元素
：nth-child（n）————其父元素的第n个子元素
：nth-child（even）或者（2n）————其父元素的所有偶数元素
：nth-child（odd）或者（2n+1）————其父元素的所有奇数元素
：nth-last-child（even）————从最后一个元素开始数所有偶数

		li:first-child{
            color: red;
        }
        li:last-child{
            color: purple;
        }
        li:nth-child(2){
            color: orange;
        }

属性选择器

a [ id ]———— 选出有id属性的元素
a [ id = first ]———— 选出id=first的元素
a [ class *= " links " ]————— 选出class中有links的元素
a [ href ^= http ] ———— 选出herf中以http开头的元素
a [ href $= jpg ]———— 选出href中以jpg结尾的元素

练习

<style>
        .demo a{
            float: left;         /*靠左浮动*/
            display: block;   /*此元素变为块级元素*/
            height: 50px;
            width: 50px;
            border-radius: 10px;    /*为元素添加圆角边框*/
            background: pink;
            text-align: center;      /*文本放置在中心*/
            color: deepskyblue;
            text-decoration: none;     /*无下划线等文本修饰*/
            margin-right: 5px;           /*设置元素右边距*/
            font: bold 20px/50px Arial;
        }
        /*选出有id属性的元素*/
        a[id]{
            background: #63ff23;
        }
        /*选出id=first的元素*/
        a[id=first]{
            background: yellow;
        }
        /*选出class中有links的元素*/
        a[class*="links"]{
            background: orange;
        }
        /*选出herf中以http开头的元素*/
        a[href^=http]{
            background: blue;
        }
        /*选出href中以jpg结尾的元素*/
        a[href$=jpg]{
            background: blueviolet;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="www.baidu.com" class=" item first" id="sed">1</a>
    <a href="sadafd" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class=" item">3</a>
    <a href="images/123.jpg" class=" item">4</a>
    <a href="images/123.jpg" class=" item">5</a>
    <a href="abc" class=" item" id = demo>6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="http://blog.kuangstudy.com" class=" item">8</a>
    <a href="http://blog.kuangstudy.com" class=" item">9</a>
    <a href="abcd.doc" class=" item last" id="first">10</a>
</p>

追JAVA的小菜鸟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA前端————CSS—字体—选择器

CSSCascading Style Sheet——层叠级联样式表作用：美化界面（字体大小样式图片宽高边距样式）使结构和样式分离实现了HTML只做结构 CSS只做样式优点内容和表现分离网页结构表现统一可以实现复用样式丰富三种导入格式内部样式：< style> h1{ } < /style>外...
复制链接

扫一扫

专栏目录