干货系列!css知识点日记!

最新推荐文章于 2024-08-08 15:02:59 发布

lfl1994

最新推荐文章于 2024-08-08 15:02:59 发布

阅读量424

点赞数

分类专栏：干货系列文章标签： css html 语法基础

本文链接：https://blog.csdn.net/lfl1994/article/details/61614872

版权

干货系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一. 网页的组成
html css JavaScript
html: 是由标签组成
css: 负责给页面中的内容增加样式的,比如:改变字体颜色,背景色,尺寸
javascript : 增加动态效果
二. css简介
cascading style sheet 层叠样式表
学习css的好处:
1.分离出来可以是代码做到复用
2.便于维护管理,修改,页面美观
3.浏览器可以对样式进行缓存,可以提高加载速度

html离开css照样可以活得很潇洒,但是css离开html他就过不下去

文件后缀:
html文件后缀: .html
css文件后缀: .css
js文件后缀: .js
php文件后缀: .php

三. 三种链接方法
行内样式表: 写在开始标签中, 格式: style="color:red
内联样式表: 写在head标签中, 格式: <style type="text/css">写样式</style> [注]type属性可有可无
外联样式表: 写在head标签中, 格式: <link rel="stylesheet" type="text/css" href="3-wailian.css" />

rel: 被连接的文档是一个样式表

例:1行内样式表:

<!DOCtype html>
<html>
<head>
<title>行内</title>
<meta charset="utf-8" />
</head>
<body>

<p style="color:red;">一闪一闪亮晶晶,满天都是小星星</p>
</body>
</html>

例2:内联样式表

<!DOCtype html>
<html>
<head>
<title>内联样式表</title>
<meta charset="utf-8" />

<style type="text/css">
/*内联样式表*/
p {
color: red;
}
</style>
</head>
<body>
<p>一闪一闪亮晶晶,满天都是小星星</p>
</body>
</html>

例3:外联样式表

1.<!DOCtype html>
<html>
<head>
<title>外联样式表</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="3-wailian.css" />
</head>
<body>

<p>一闪一闪亮晶晶,满天都是小星星</p>
</body>
</html>

2.css文件

p {
font-size:50px;
}

四. css语法特点
1.格式: 选择器 {}
2.大括号中写样式
3.样式格式: html 属性名="属性值" 中间用空格隔开
css 属性名:属性值; 分号不能少
4.html注释:

css注释 : /*这里写注释*/

五. 常用选择器
<1>标签选择器: 在html 中可以使用标签,来设置样式,给该文件中所有的同一个标签来设置样式格式: 标签名 {}
<2>class选择器:在html中使用标签的属性class设置一个值, 格式为: .类名 {}
[注] 1.在同一个文件中class的值可以相同
2.class 属性值可以有多个,中间用空格隔开
3.设置的越近,优先级越高
<3>id选择器: 在html中使用id的属性设置一个值, #表示id 格式为: #id名 {}
[注] id的值时唯一的,不能重复
<4>组合选择器: id class 标签. 层级选择器组合起来使用后格式: 各种选择器,中间使用逗号隔开 {}
<5>层级选择器: 有层级关系,可以从父级找到子级或者子子级,中间使用空格隔开
<6>伪类选择器: (link,active,hover,visited focus first-child last-child)
first-child: 从父级标签中找到第一级
last-child: 从父级找到最后一级
link: 表示超链接默认的颜色
hover: 表示鼠标放上去但是没有点击时颜色
active: 表示鼠标点击时(处于活跃的状态)显示的颜色
visited: 表示访问过超链接的颜色
可靠顺序为: link---visited----hover----active
focus: 表示焦点通常结合input框来使用
鼠标选中并且离开后的状态就是focus

总结: 标签名:link(active,hover,visited focus first-child last-child) {}
<7>属性选择器: 一般只用于input框格式为:input[type="text"] {background-color: red;}

<8>* 通用选择器:给整个页面的一个样式格式: * {}

例1标签选择器

<!DOCtype html>
<html>
<head>
<title>标签选择器</title>
<meta charset="utf-8" />
<style type="text/css">
div {
font-size: 50px;
color: red;
}
p {
background-color: yellow;
}
</style>

</head>
<body>

<p>一闪一闪亮晶晶,满天都是小星星</p>
<div>充电五分钟,通话两小时</div>
</body>
</html>

例2 class选择器

<!DOCtype html>

<html>
<head>
<title>class选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*class选择器*/
.lhy {
color: green;
font-size: 100px;
}
.hr {
color: pink;
background-color: green;
}
</style>

</head>
<body>
<div class="lhy hr">最穷不过要饭,不死终会出头</div>
<p class="lhy">好运不会眷顾傻瓜</p>

</body>
</html>

例3 id选择器

<!DOCtype html>
<html>
<head>
<title>id选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*id选择器*/
#bb {
background-color: green;
color: yellow;
}
</style>

</head>
<body>
<p id="bb">其实我是喜欢王宝强的,我觉得老宋长得特别寒碜</p>

</body>
</html>

例4;组合选择器

<!DOCtype html>
<html>
<head>
<title>组合选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*组合选择器*/
.fty, #gq, span, b {
color: red;
font-size: 30px;
}
</style>

</head>
<body>
<div class="fty">安踏不走寻常路,特步非一般的感觉</div>
<p id="gq">曾经沧海难为水,除却巫山不是云</p>
<span>这一刻照亮你的帅</span>
<b>我想静静</b>
</body>
</html>

例5:层级选择器

<!DOCtype html>
<html>
<head>
<title>层级选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*层级选择器*/
.yeye .father #sunzi {
font-size: 30px;
color: red;
}
.yeye .father span {
font-size: 20px;
color: blue;
}
.yeye #chongsun {
color: gray;
}
.yeye .father #sunzi #chongsun {
color: yellow;
}
</style>

</head>
<body>
<div class="yeye" >
<div class="father">
<div id="sunzi">
这是孙子
<div id="chongsun">
这是重孙子
</div>
</div>
<span>这是孙女</span>
</div>
</div>

</body>
</html>

例6:伪类选择器

<a<!DOCtype html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*伪类选择器*/
div .ul li:first-child {
color: red;
font-size: 30px;
}
div .ul li:last-child {
color: blue;
font-size: 60px;
}
.bq a:first-child {
color: green;
font-size: 40px;
}
.bq a:last-child {
color: green;
font-size: 40px;
}
</style>

</head>
<body>
<div>
<ul class="ul">
<li>第一级</li>
<li>第二级</li>
<li>第三级</li>
<li>第四级</li>
<li>第五级</li>
</ul>

</div>

<div class="bq">

<a>标签1</a>
<a>标签2</a>
<a>标签3</a>
<a>标签4</a>
<span>这是一个捣乱的标签</span>

</div>

</body>
</html>

例7:属性选择器

<a<!DOCtype html>
<html>
<head>
<title>属性选择器</title>
<meta charset="utf-8" />
<style type="text/css">
/*属性选择器*/
* {
background-color: blue;
}
input[type="text"] {
background-color: red;
}
input[name="password"] {
background-color: green;
}
</style>

</head>
<body>
用户名:<input type="text" name="username" /><br />
密码: <input type="password" name="password" />
</body>
</body>
</html>

六. 优先级
继承性: 主要针对于文本属性,设置样式:字体的大小,颜色
单个选择器优先级: 行内样式 > id选择器 > class选择器 > 标签选择器
内联和外联优先级: 外联的优先级大于内联的优先级

多个选择器优先级 :设置的越精确,优先级越高

例:继承性

<a<!DOCtype html>
<html>
<head>
<title>继承关系</title>
<meta charset="utf-8" />
<style type="text/css">
.yeye {
color: red;
font-size: 30px;
}
</style>

</head>
<body>
<div class="yeye">
这是爷爷说的话
<div class="father">
这是爸爸说的话
<div id="sunzi">
这是孙子
</div>
</div>
</div>
</body>
</body>
</html>

例:优先级

<a<!DOCtype html>
<html>
<head>
<title>优先级</title>
<meta charset="utf-8" />
<style type="text/css">
.yeye {
color: red;
}
#nainai {
color: green;
}
div {
color: blue;
}
p {
font-size: 30px;
}
.yy #ss {
color: red;
font-size: 100px;
}
.yy .ff #ss {
color: blue;
font-size: 50px;
}
</style>
<link rel="stylesheet" type="text/css" href="3-wailian.css" />

</head>
<body>
<div class="yeye" id="nainai" style="font-size:30px;">
这是爷爷说的话
</div>
.
<p>我们的一根鸡毛都不能少</p>

<div class="yy">
这是爷爷辈
<div class="ff">
这是父辈
<div id="ss">
这是孙子辈
</div>
</div>

</div>

</body>
</html>

七. 行内元素块元素行内块元素
块元素: div p h1-h6 ul ol hr table

其他的标签都是行内元素

行内块元素:1.css中,只有块元素才有宽和高,才能设置相应的样式

2.如果不设置块元素的宽度,其宽度会占用整行,如果不设置高度,内容会占据相应的高,如果不设置内容,整个块元素就没有意义

3.行内块标签,有两个特殊的标签img input 因为他们都可以设置宽和高,但是在写其他内容又不需要换行

八. 常用属性

1.宽高
width/height:
min-height/max-height/max-width/min-width(了解)
2.单位
px:
em:
rem:
%:
3.字体
font-size/color/font-weight/font-family/font-style
4.文本属性
text-indent:
text-align:
text-overflow:
text-decoration:
text-shadow:
line-height:

vertical-align:

最后,如果您是初学者碰巧看到这篇博客,有什么问题可以评论留言,大家一起交流一下,如果您是大牛,有什么问题也请指出来,赠人玫瑰,手留余香嘛!

lfl1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
干货系列!css知识点日记!

一. 网页的组成html css JavaScripthtml: 是由标签组成css: 负责给页面中的内容增加样式的,比如:改变字体颜色,背景色,尺寸javascript : 增加动态效果二. css简介 cascading style sheet 层叠样式表学习css的好处:1.分离出来可以是代码做到复用2.便于维护管理,修改,页面美观3.浏览器可以对
复制链接

扫一扫

专栏目录