Web基础-CSS

MXLS

已于 2023-04-01 10:46:30 修改

阅读量58

点赞数

分类专栏： Web前端开发文章标签： css css3 html5 Powered by 金山文档

于 2023-03-17 21:06:42 首次发布

本文链接：https://blog.csdn.net/ikun_King/article/details/129628042

版权

Web前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3.1.1 CSS概述

CSS：Cascading Style Sheets层叠样式表

内容和样式相分离，便于修改样式

CSS语法

<body>
<p>天使投资指早期投资，尤其指个人早期投资</p>
<p>VC,Venture Capiyal，所谓分线透支、创业透支，是相对靠前的非公开市场股权投资</p>
<p>PE,Private Equity,所谓私募投资、非公开市场直奔，
即是私募股权投资的统称，有特指相对靠后的股权投资。</p>
</body>

p标签：

p{
font-size:12px;
color:blue;
font-weight:bold;
}

p为选择器

属性：

font-size:-字号

color:-颜色

font-weight:-加粗

注释-CSS

注释可以跨行，/*字号*/

3.2.1 添加方法-行内样式，内嵌样式，外部样式表，链接样式

行内-<p style>

内嵌-<style>

单独文件-<link>

内嵌样式：

内嵌样式p标签，放置于head标签内，可以通过style标签来设置属性color，后可以在body标签内运用格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{
            color: red;
        }
    </style>
          
</head>
<body>
    <p>天使投资指早期投资，尤其指个人早期投资</p>
</body>              
</html>

注意点：

即使有公共的CSS代码，也是每个页面都要定义的

适合文件很少，CSS代码也不多的情况

如果一个网站有很多页面，每个文件都会变大，后期的维护难度也会变大

CSS添加方法-单独文件-外部式样式表文件

外部式样式表文件-style.css

style.css-定义样式

p{
    color: red;/*设置文字的颜色 */
}

1.html-引用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>天使投资指早期投资，尤其指个人早期投资</p>
</body>
</html>

结果：

优点：

页面结构与HTML代码与样式CSS代码的完全分离

维护方便

如果需要更改网站风格，只需要修改公共CSSS文件

可以再同一个HTML文档内部应用多个外部样式表

CSS添加方法-优先级

多重样式可以成蝶，可以覆盖

样式的优先级按照“就近原则”

行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式

案列：

标题样式

h3{
    color: red;
    text-align: left;
    font-size: 8pt;
}

样式会出现样式覆盖

3.2.2-案例-3种添加CSS样式添加方法对比

内嵌样式由style-位于head标签种标签来构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        p{
            color: red;
            font-size: 12px;
        }
    </style> -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- <p style="color:red;font: 12px;">天使投资指早期投资，尤其指个人早期投资</p> -->
    <!-- <p>天使投资指早期投资，尤其指个人早期投资</p> -->
    <p>天使投资指早期投资，尤其指个人早期投资</p> 
    
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus eum pariatur,
         ducimus dicta voluptatum praesentium illo libero debitis atque eveniet reiciendis maiores excepturi accusantium voluptatem officia cum repellendus explicabo dolor.</p>
</body>
</html>

3.3.1-标签、类别、ID选择器；选择器集体、嵌套、全体声明

CSS选择器类型：

内嵌样式-标签选着器

<sytle type="text/css">
body{
background-color:#ccc;
text-align:center;
font-size:12px;
}
h1 {font:"黑体"，font-size:20px}
p {color:red;font-size:16px;}
hr {width:200px;}
</style>


<body>
    <h1>标题</h1>
    <hr>
    <p>正文的段落</p>
    版权所有
</body>

内嵌样式-类别类型选择器

<style type="text/css">
p {font-size: 12px;}
.one{font-size: 18px;}
.two{font-size: 24px;}
</style>

<body>
    <p class="one">类别1</p>
    <p class="one">类别1</p>
    <p class="two">类别2</p>
    <p class="two">类别2</p>
    <p>普通段落的文字</p>
</body>

注意点：

.one中的点号-.

应用的时候one是不包含.号的

ID选择器

<style type="text/css">
    #one{font-size: 12px;}
    #teo{font-size: 24px;}
</style>

<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>

注意点：

ID选着器与类别选着器的区别

ID选择器定义的样式仅可以被应用一次

类别选择器可以被重复利用

嵌套声明-选择器叠加使用

<style type="text/css">
    p span{
        color: red;
    }

</style>

<body>
    <p><span>天使投资</span>是投资的一种方式</p>
</body>

集体声明

<style type="text/css">
    h1,p{ text-align:center;

    }
</style>

<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
</body>

注意点：

h1与p具有相同的属性即为center居中

h1与p标签之间使用,号隔开

全局声明-针对于所有的网页元素-属性设置

<style type="text/css">
    *{
        text-align: center;
    }
</style>

<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎访问论坛</p>
    <h2>欢迎访问论坛</h2>
</body>

注意点：

*{xxx}进行属性的设置

全局声明的设置每个标签都会被应用

混合：

多个class选择器混用，使用空格分开

<div class="one yellow left">....</div>

id和class混用

<div id="my"class="one yellow left">

id选择器不可以多个同时使用

总结....

3.4.1CSS样式-单位与颜色，文本属性，文字属性

文字与文本；

单位与颜色

单位：

单位	描述
px	像素
em	1em-1个字符 2em-2个字符自动适应用户所使用的字体
%	百分比

颜色

颜色		描述
red,blue,green
rgb(%%%)
rgba(x,x,x,x)
#rrggbb

text-文本

属性	描述	取值
color	文本颜色	red#f00 rgb(255,0,0)
leeter-spacing	字符间距(正负)	2px -3px
line-height	行高	14px 1.5em 120%
text-align	对齐	center left right justify
text-decoration	装饰线	none overline underline line-through
text-indent	首行缩进	2em

注意点：

1.5em表示为1.5倍的正常行高

120%表示基于当前像素的大小设置

justify表示两端对齐

none-没有装饰线

line-through-装饰线作为删除线贯穿文本中

案列：

leeter-spacing

<style>
    h1 {letter-spacing: 2px;}
    h2 {letter-spacing: -3px;}
</style>

<body>
    <h1>标题内容</h1>
    <h2>文本段落主要内容</h2>
</body>

line-height

<style>
    p{
        font-size: 14px;
        line-height: 2em;
    }
</style>
<body>
    <p>
        这里是web前端开发课程
    </p>
</body>

text-align

<style>
h1 {text-align: center}
.date{text-align: right}
.main{text-align: justify}
</style>

<h1>CSS text-align实例</h1>
<p class="date">3月14号</p>
<p class="main">当我年轻的时候......</p>

注意点：

justify两端对齐的方式常用于大段文字的排版工作

text-decoration

<style>
    h1 {text-decoration: overline;}
    h2 {text-decoration: line-through;}
    h3 {text-decoration: underline;}
</style>

<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
</body>

应用:

overline可以用于装饰

删除线，用于打折原价

设置为none-可以超链接的消除下划线

<style>
    a{
text-decoration: none;
    }
</style>
<body>
    <ul>
        <li><a href="#">链接1</a></li>
    </ul>
</body>

font

属性	描述	范例
font	在一个声明中设置所有的字体属性	font;bold18px '幼圆'
font-family	字体系列	font-family:
font-size	字号	14px 120%
font-style	斜体	italic
font-weight	粗体	bold

注意点：斜体粗体字号/行高字体

font:italic bold 16px/1.5em ‘宋体’

总结。。。。。

3.5.1-背景、超链接样式

背景：

background:

background-color

background-image

background-repeat:

repeat

repeat-x

repat-y

no-repeat

div{
    height:30px;
    width:600px;
    background: url("images/bg1.gif") repate-x;
<!-- 将图片以x轴的方式进行填充 -->
}

超链接的样式与鼠标的点击后的文本效果：

伪类超链接

a:link-普通的、未被访问的链接

a:visited-用户已访问的链接

a:hover-鼠标指针位于链接的上方悬停

a:active-链接被点击的时刻（活动超链接）

顺序：Love & Hate

a:hover- 必须位于link和visited之后

a:active-必须位于hover之后

div{
    height:30px;
    width:600px;
    background: url("images/bg1.gif") repate-x;
}

a:link {
    text-decoration:none;
    <!-- 文本样式 -->
    color: #09f;
    <!-- 点击前的样式 -->
    <!-- 未访问 -->
}
a:visited{
    text-decoration:none;
    <!-- 文本样式 -->
    <!-- 点击后的样式 -->
    color: #930;
    <!-- 访问 -->
}
a:hover{
    <!-- 下划线 -->
    text-decoration:underline;
    <!-- 文本样式 -->
    <!-- 鼠标悬停-->
    color: #O3c;
    <!-- 深蓝色 -->
}
a:active{
    <!-- 无下划线 -->
    text-decoration:none;
   <!-- 按下鼠标后的文本颜色 -->
    color:#O3c;
}

<!-- 鼠标悬停后的效果 -->

<!-- 悬停后放大字体 -->
a{
    font-size:22px;
}
a:hover{
    font-size:120%
}
<a href="#">web design</a>

3.6.1列表(ul、ol)和表格的样式

列表：

list-style：

list-style	所有用于列表的属性设置于一个声明
list-style-image	为列表项标志设置图像	url("images/bullet1.gif")
list-style-position	标志位置	inside-在右侧 outside-在左侧	`<style="text/css"> .inside{ list-style-position:inside } .outside{ list-style-position:outside } </style> <ul class="inside"> <li>1</li> <li>2</li> <li>3</li> </ul> <ol class="outside"> <li>1</li> <li>2</li> <li>3</li> </ol>`
list-style-type	标志类型	有没有标号标号类型-数字字符罗马

list-style-image

list-style-position

list-style-type

表格:

border、border-collapse

合并表格的border和单元格的border
table {
border-collapse:collapse;
}

width

height

<!-- 表格大小，表格边框 -->
table{
    sidth: 500px;
    heigth:200px;
}

table,td,th {
border:1px solid #eee;
}

表格隔行显示不同的颜色-奇偶选择器

<!-- 奇偶选择器 -->
<th>-标签可以设置表头
tr:nth-child(odd){
    backgroiund-color:#EAF2D3;
}

4.1.1布局与定位概述

MXLS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web基础-CSS

Web基础-CSS
复制链接

扫一扫

专栏目录