CSS

最新推荐文章于 2024-03-17 21:40:56 发布

全栈开发ck

最新推荐文章于 2024-03-17 21:40:56 发布

阅读量426

点赞数

分类专栏：初始化前端文章标签： css标签 css

本文链接：https://blog.csdn.net/weixin_44954172/article/details/91396568

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

初始化

20 篇文章 0 订阅

订阅专栏

CSS笔记

如何引用css样式

内联样式

<html>
<head>
    <style>
    h1{
        color: red;
    }
    </style>
</head>
<body>
    <h1>标题1</h1>
</body>
</html>

外联样式 link

新建的样式文件扩展名是.css

<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>标题1</h1>
</body>
</html>

设置浏览器地址栏上的小图标

<head>
    <title>Document</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>

type属性可以省略，rel属性不可以省略

行内样式 style

<h1 style="color:yellow">标题1</h1>

注意：css是一门静态语言

导入@import url

<style>
/*导入css*/
@import url("css/style.css");
</style>

css link和@import区别用法

1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4、link支持使用Javascript控制DOM去改变样式；而@import不支持。

css选择器

id选择器

<style>
#red{
    color: red;   
}
</style>
<h1 id="red">标题1</h1>

class(类)选择器

<style>
.green{
    color: green;   
}
</style>
<h1 class="green">标题1</h1>
<h2 class="green">标题2</h2>

tag（标签）选择器

<style>
h1{
    color: blue;   
}
</style>
<h1>标题1</h1>

attr（属性）选择器

<style>
[name="h1"]{
    color: orange;   
}
</style>
<h1 name="h1">标题1</h1>
<h2 name="h1">标题2</h2>

属性选择器支持通配符：

^ 以什么字符开头

<style>
[class ^= "fa"]{
    color: pink;
}
</style>
<div class="fa add ">标题1</div>
<div class="fa remove">标题2</div>

$ 以什么字符结尾

<style>
[class $= "fa"]{
    color: yellow;
}
</style>
<div class="add fa">标题1</div>
<div class="remove fa">标题2</div>

* 包含什么字符（开头和结尾都算）

<style>
[class *= "fa"]{
    color: cyan;
}
</style>
<div class="ok fa add">标题1</div>
<div class="no fa remove">标题2</div>

:before (伪类) 选择器

<style>
/* 默认 */ 
a:link{
    color: blueviolet;
    text-decoration: none;
}
/* 单击过后 */
a:visited{
    color: gray;
}
/* 鼠标滑过 */
a:hover{
    text-decoration: underline;
}
/* 单击一瞬间 */
a:active{
    line-height: 2;
}
</style>

<a href="#">超级链接</a>

注意：超级链接伪类样式定义的顺序是LVHA，也就是Link -> Visited -> Hover -> Active

level(层级或者关系) 选择器

<style>
/* 空格是指box内部所有的后代都算 */
.box h2{
    color: coral; 
}

/* 大于是指box内部一级后代都算 */
.box > h2{
    color: red; 
}

/* 注意之间没有空格，表示two和box是属于同一个元素的类 */
.box.two{
    color: palevioletred;
}

/* box后面紧跟加号，代表 加号后面的元素是box元素的下面同辈的第一个元素。 */
.box + h4{
    color: chartreuse;     
}

/* box后面紧跟星号，代表 星号后面的元素是box元素的下面同辈的所有元素。 */
.box ~ *{
    color:chocolate;
}
</style>
<div class="box two">
    <h2>标题</h2>
    <p>段落</p>
    <ul>
        <li>
            <h2>标题2</h2>
        </li>
    </ul>
</div>

<h4>标题4</h4>

<p>段落1</p>
<p>段落2</p>
<span>连接</span>

* （通配符）选择器

要慎用此选择器，因为它会造成一定的性能开销

* {
    margin: 0;
    padding: 0;
}

2019-6-10

选择器优先级

!important
行内样式 style
id
class类和 attr属性是相同优先级
tag 标签
默认样式

<style>
#box{
    color: red;
}
.box{
    color: blue;
}
[name="box"]{
    color: blueviolet;
}
div{
    color: green !important;
}
</style>

<div id="box" class="box" name="box" style="color: cyan">
        文字文字
</div>

css定义的权重

tag 标签的权重为 1
class 类的权重为 10
id 的权重为 100

<style>
.nav li{
    display: inline;
    color: blue;
}
.active{
    color: red;
}
</style>

<ul class="nav">
    <li>首页</li>
    <li class="active">关于我们</li>
    <li>联系我们</li>
</ul>

以上代码，因为.nav 是类，它的权重是10，li是标签，它的权重是1，所有.nav li加起来的权重就是11，而.active是类，权重为10，10小于11，所以active类的红色无法覆盖。

正确写法如下：

<style>
.nav li{
    display: inline;
    color: blue;
}
.nav li.active{
    color: red;
}
</style>

<ul class="nav">
    <li>首页</li>
    <li class="active">关于我们</li>
    <li>联系我们</li>
</ul>

可继承和不可继承属性

可继承属性

color 颜色属性

不继承color属性的标签：

a 超级链接
button 按钮
input 输入框
select 下拉框
textarea 多行输入框

font-size 字体大小属性

不继承font-size属性的标签：
- button 按钮
- input 输入框
- select 下拉框
- textarea 多行输入框
font-family 字体属性

不继承font-family属性的标签：
- button 按钮
- input 输入框
- select 下拉框
- textarea 多行输入框
line-height 行高
UL LI DL DD DT 项目列表

不可继承属性

border: 边框
width：宽
height：高
margin: 边距
padding：填充

css 样式规则

命名

字母（或者_-）开头，后面允许数字、字母、下划线、中横杠

以下是错误的css命名

.1red{
    color:red;
}
.222{
    color:red;
}
.@abc{
    color:red;
}
.abc cd{
    color:red;
}

.abc{
    color:green;
}
.ab-cd{
    color:green;
}
.AB-CD{
    color:green;
}
.ab_cd{
   color:green; 
}
.ab123{
    color:green;
}

注意：css命名严格区分大小写，建议一律小写

语法规则

属性名: 属性值;

错误的写法

/*使用了中文的冒号*/
.abc{
    color：red;
}

/*使用了等于号*/
.abc{
    color = red
}

/*使用了中文的分号*/
.abc{
    color: red；
}

/*使用了逗号分割属性，应该是分号*/
.abc{
    color: red,
    font-size: 12px
}

/*没有使用分号分割属性，注意最后一个属性可加分号，也可以省略*/
.abc{
    color: red
    font-size: 12px
}

正确的写法

.abc{
    color:red;
    font-size:12px;
}

文本

对文字进行一系列修饰的属性

color：颜色（4种表达）
font-size：文字大小 (px、%、em、rem、vw、vh)

注意：各大主流浏览器默认字体大小通常是16px

px、em、rem的区别

px称为像素，它是一种抽象的单位，在谷歌中文浏览器下，最小不能小于12px。

em它是相对的单位，它始终是相对父元素继承过来的字体大小作为参考大小。

<style>
div{
    font-size: 30px;  
}
span{
    color:red;
    font-size: 1em;
}
</style>

<div>
    <p>
        <span>文本</span>
    </p>
</div>

rem 它是相对的单位，相对根元素html的参考大小的一种单位。

注意：后期学习响应式布局，我们推荐使用rem作为首选单位，因为我们可以通过调整html根元素的字体大小，来确保页面中所有字体大小是等比例的放大缩小关系。

vw 它是相对的单位，表示可视宽，注意它大小不是一成不变

vh 它是相对的单位，表示可视高，注意它大小不是一成不变

注意：块元素的宽度默认相当于100%，所有不需要手动设置width:100%，然后块元素的高度100%，是需要从直接父元素中高度（实值）得到的。

<style>
/* 第1步 */
html{
    height: 100%;
}
/* 第2步 */
body{
    height: 100%;
}
/* 第3步 */
div{
    background-color: red;
    height: 100%;
    /* 如果使用100vh则不需要第1-2步 */
}
</style>

<div>
    文字
</div>

font-weight 加粗属性
- bold 加粗
- 600 加粗
- normal 不加粗
font-style 斜体属性
- italic 斜体
- normal 不倾斜
font-variant 属性设置小型大写字母，normal正常

<style>
span{
    color: red;
    font-size: 30px;
}
.small{
    font-variant: small-caps;
}
</style>
<span>abcde</span>
<span class="small">abcde</span>

font-family：定义字体的属性

注意：字体定义不是随心所欲的定义，要考虑兼容情况，它有一套后备机制。

elementUI团队字体定义方案：

body{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

antd团队字体定义方案：

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
}

text-transform：文本转型
- capitalize 首字母大写
- lowercase 一律小写
- uppercase 一律大写
- none 不应用转型
text-decoration：文本用线修饰

none: 无修饰线
overline：上划线
line-through：中划线
underline：下划线

<style>
span{
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    text-transform: capitalize;
    text-decoration: underline;
    color: red;
}
</style>
<span>abcde cdddddd</span>

text-align：文本对齐

可以使用text-align对齐的元素：

文本
行内标签 span、b、em
行块标签 img、video、input

<style>
div{
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
}
</style>

<div>
    <span>你好</span>
</div>

居中对齐演示

<style>
div{
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: justify;
}
div p{
    width: 100px;
    background-color: green;
    margin-left: auto;
    margin-right: auto;
}
</style>

<div>
    <p>文字</p>
</div>

left：左对齐
center：居中对齐
right：右对齐
justify：两端对齐

两端对齐示例

<style>
div{
    width: 300px;
    text-align: justify;
}
</style>
<div>
    <p>于人谈“契约”，于己忙“弃约”，这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬，孰不知高高在上、颐指气使的行为举止同真正的契约精神格格不入，挖了一个个“弃约陷阱”的同时，他们也在撕下自己脸上的假面具。</p>
</div>

text-indent：文本缩进属性

<style>
div{
    width: 300px;
    text-align: justify;
    text-indent: 2em;
}
</style>
<div>
    <p>于人谈“契约”，于己忙“弃约”，这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
    <p>于人谈“契约”，于己忙“弃约”，这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
</div>

提示：text-indent有时候也会用在seo优化上，使得文字不显示。

<style>
a.logo{
    display: inline-block;
    text-indent: -999em;
}
</style>
<a href="#" class="logo">思诚科技</a>

white-space：强制不换行

<style>
div{
    width: 200px;
    background-color: red;
}
div p{
    white-space: nowrap;
}
</style>

<div>
    <p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式</p>
</div>

text-overflow：文本溢出处理 ellipsis表示溢出后使用...

单行文本溢出省略效果

<style>
div{
    background-color: red;
    width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>

<div>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
</div>

word-break：强制换行

当书写一些连续的字符时，它不会换行，那么需要强制换行

<style>
div{
    width: 300px;
    background-color: red;
    word-break: break-all;
}
</style>

<div>你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你</div>

强制换行推荐下面的写法

div{
    word-wrap: break-word;
    word-break: normal;
}

text-shadow：文字阴影

语法：

text-shadow: x轴偏移 y轴偏移 blur模糊度 颜色值

<style>
span{
    text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
}
</style>

<span>你好</span>

注意：文字阴影兼容是 IE9+

伪类

背景

盒子

外部

全栈开发ck

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS课程笔记如何引用css样式内联样式<html><head> <style> h1{ color: red; } </style></head><body> <h1>标题1</h1></body></html&...
复制链接

扫一扫