css笔记-选择器字体文本背景

最新推荐文章于 2024-07-10 18:34:49 发布

@LitterFisher

最新推荐文章于 2024-07-10 18:34:49 发布

阅读量132

点赞数

分类专栏： html-css-js 文章标签： css

本文链接：https://blog.csdn.net/weixin_44002250/article/details/118800084

版权

html-css-js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

引入方式

方式	name
内部样式表	一般放在页面head style里面（嵌入式）
行内样式表	标签里面直接写
外部样式表	引入外部css link rel href

选择器分类

选择器	类型
标签（元素）选择器	p {…}
类选择器	class=“xx” .xx{…}
多类名选择器	多个类选择器空格隔开
id选择器	#id {…}
通配符选择器	所有标签
属性选择器	xx[属性或者属性=xxxx]
复合选择器	如下

复合选择器	作用	怎用	举例
后代选择器	用来选择元素后代	选择器空格选择器	ol li {…}
子代选择器	选择最近一级元素	只选亲儿子父元素>子元素	.nav>a
交集选择器	选择两个标签交集的部分	标签点class	p.one
并集选择器	选择某些相同样式的选择器	符号是逗号	.nav, .top
链接伪类选择器	给链接更改状态	a:xx	a:link
focus伪类选择器	获取焦点的input标签	input：focus{xx}	input：focus{xx}

注意声明顺序lvha

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        p {
            color: aqua;/*分号结尾*/
        }
        /*类选择器注意命名规范*/
        .lei {
            color: red;
        }
        .font {
            font-size: 18px;
        }
        #p_id {
            color: darksalmon;
        }
        * {
            color: red;
        }
    </style>
</head>
<body>
<p>
    css 由选择器与一条或者多条声明组成
    <br/>
    选择器{样式1，2，3，4}
</p>

<p class="lei">
    类选择器
</p>

<p class="lei font">
    多类名选择器空格隔开 公共选择器用得上
</p>
<p id="p_id">
    id 选择器
</p>

字体

属性	备注
font-family	字体系列
font-size	字号大小默认16
font-weight	字体粗细 400 bold加粗，normal
font-style	字体风格normal italic斜体
font	复合顺序 font: font-style font-weight font-size/line-height font-family

文本

属性	备注	常用
color	文本颜色	# 16进制
text-indent	文本缩进	单位 em /% /px
text-align	对齐文本	默认 left justify 两端对齐文本效果
text-decoration	文本修饰	underline 下划线 overline 上划线 line-through 中间，blink 闪烁的文本。
line-height	行间距	px em %包括上下间距文本间距

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*字体系列*/
            font-family: "Microsoft YaHei UI","宋体";
            /*字号大小 默认16*/
            font-size: 18px;
            /*字体粗细*/
            font-weight: normal;
            /*font-weight: 400 bold加粗;*/
            /*字体风格normal italic斜体*/
            font-style: normal;
            /*复合：*/
           /* font: font-style font-weight font-size/line-height font-family*/
            font: italic 700 16px '宋体';
        }
        em {
            font-style: italic;
        }
       #color {
           color: red;
           text-align: center;
           text-decoration: underline;
           text-indent: 5em;
           line-height: 4em;
       }
    </style>
</head>
<body>
<p>
    dddd
    多个字体 第一个字体你电脑有没有装有第一个
    <br>
    找不到，用浏览器默认字体
</p>
<em>
    斜体不斜体
</em>
<p id="color">
    文本
</p>

元素	常用	特点	设计宽高	注意
块级元素	h div ul ol li p等	独占一行，容器可以继续放块级元素和行内元素	可以直接设计wh，默认宽度容器100%	容器可以继续放块级元素和行内元素，文字元素里面不可放块级元素如p h内不可div
行内元素	span a strong i em del等	一行可以多个行内元素，	不可直接，默认宽度本身内容宽度	只能放行内元素或者其他文本元素，特殊a 可以放块级元素
行内块元素	td img input	一行可以多个行内块元素	可以设置，默认宽度本身内容宽度

3者转换：

    <style>
        a {
            width: 40px;
            height: 40px;
            display: block;
            background-color: gold;
        }
        div {
            width: 30px;
            height:50px;
            background-color: aqua;
            display: inline;
        }
        span {
            width: 300px;
            height: 100px;
            background-color: aqua;
            display: inline-block;
        }
    </style>
<a href="#">行转块</a>
<div>cc</div>
<div>块转行</div>

<span> 行内——>行内块</span>

侧边栏案例

<head>
    <meta charset="UTF-8">
    <title>小米侧边栏案例</title>
    <style>
        a {
            display: block;
            width: 160px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #ffffff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
            /*文字垂直居中文字高度等于行高即可*/
        }
        a:hover{
            background-color: #ff6700;
        }
    </style>
</head>
<body>
案例
<a href="#">游戏手机</a>
<a href="#">5G手机</a>
<a href="#">拍照手机</a>
<a href="#">全面屏手机</a>
<a href="#">老人机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
<a href="#">手机维修</a>
</body>

背景

属性	备注	常用
b-color	背景颜色	transparent 默认透明的， 1.有效的颜色名称 - 比如 “red” 2.十六进制值 - 比如 “#ff0000” 3.RGB 值 - 比如 "rgb(255,0,0)" 4.rgba(r,g,b,a)a透明度
opacity	不透明度	取值范围为 0.0 - 1.0。值越低，越透明
image	背景图片	url(“path”) 默认情况下，图像会重复，以覆盖整个元素。
repeat	背景平铺	repeat-x ：水平方向重复 repeat-y 垂直方向
position	指定背景图像的位置	1.x y: LCR top C bottom 2.精确单位 x y px 3.混合单位 1，2 方式混合如10px top
attachment	背景图像是应该滚动还是固定	fixed 固定 scroll 滚动的默认
复合属性	简写	color-image-repeat-attachment-position

注意：背景图片与背景颜色可以同时设置背景颜色在底层
导航条案例

    <style>
        #nav a {
            display: inline-block;
            width: 120px;
            height: 30px;
            background-color: palegreen;
            /*background-image: url("love.png");*/
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            background-position: left center;
        }
        #nav #bg1:hover{
            background-color: darkmagenta;
        }
    </style>
</head>
<body>
<div id="nav">
    <a href="#" id="bg1">导航1</a>
    <a href="#" id="bg2">导航2</a>
    <a href="#">导航3</a>
</div>

@LitterFisher

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记-选择器字体文本背景

引入方式方式name内部样式表一般放在页面head style里面（嵌入式）行内样式表标签里面直接写外部样式表引入外部css link rel href选择器分类选择器类型标签（元素）选择器p {…}类选择器class=“xx” .xx{…}多类名选择器多个类选择器空格隔开id选择器#id {…}通配符选择器所有标签属性选择器xx[属性或者属性=xxxx]<head> .
复制链接

扫一扫