CSS

最新推荐文章于 2021-06-04 09:36:31 发布
最新推荐文章于 2021-06-04 09:36:31 发布
阅读量179 收藏
点赞数

一、概念


CSS(Cascading Style Sheets)：CSS样式后层叠样式表，层叠：使用不同的添加方式给同一个HTML标签添加样式，所有样式共同作用于该标签；样式：给HTML标签添加需要显示的效果。

主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。


作用：CSS使页面更美观；CSS+Div使布局更灵活。


规则：样式选择器严格区分大小写，但属性和属性值不区分

      多个属性用英文分号隔开

      若属性值由多个单词组成，用英文引号括住


样式选择器如下：


[html]  view plain  copy
  1. <font style="color:red;size:14;"></font>  

二、引入CSS样式


1.行内样式


[html]  view plain  copy
  1. <body>  
  2.     <!--行内样式-->  
  3.     <font style="color:red">浅笑安然</font><br />  
  4. </body>  


2.内部样式


[html]  view plain  copy
  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title></title>  
  4.     <!--内部样式-->  
  5.     <style type="text/css">  
  6.         font{  
  7.             color: red;  
  8.         }  
  9.     </style>  
  10. </head>  

3.外部样式


引用外部样式：


[html]  view plain  copy
  1. <head>  
  2.         <!--外部样式-->  
  3.     <link rel="stylesheet" type="text/css" href="../css/outer.css"/>  
  4. </head>  

CSS文件设置：


[html]  view plain  copy
  1. /*font样式设置*/  
  2. font{  
  3.     color:green;  
  4. }  

优先级：行内样式优先级最高，内部样式和外部样式就近原则


三、选择器


1.元素选择器


[html]  view plain  copy
  1. <font >浅笑安然</font>  


[html]  view plain  copy
  1. /*元素选择器*/  
  2. font{  
  3.     color: red;  
  4. }  


2.ID选择器：#id名{}


[html]  view plain  copy
  1. <font id="flower">心若浮沉</font>  


[html]  view plain  copy
  1. /*ID选择器*/  
  2. #flower{  
  3.     color: blue;  
  4. }  

3.类选择器：.class类名{}


[html]  view plain  copy
  1. <font class="happy">清风自来</font>  

[html]  view plain  copy
  1. /*类选择器*/  
  2. .happy{  
  3.     color:gold;  
  4. }  


4.属性选择器：标签名[属性='属性值']


[html]  view plain  copy
  1. 文本：<input type="text" name="texts"/>  

[html]  view plain  copy
  1. /*属性选择器*/  
  2. input[type=text]{  
  3.     background-color: brown;  
  4. }  


5.包含选择器：父代标签 子代标签


[html]  view plain  copy
  1. <div class="day">  
  2.     <font>  
  3.         今天天气好晴朗  
  4.     </font>  
  5. </div>  

[html]  view plain  copy
  1. /*包含选择器*/  
  2. .day font{  
  3.     color:orangered;  
  4. }  

四、CSS样式


1.border width heigh

2.display：block块级属性 inline行级属性 none隐藏属性 inline-block：在行里的块级元素，有宽度
块级元素div ；行级元素span

3.字体：color font-size background-color

4.float：浮动 clear：清楚浮动


五、盒子模型


margin：外边距，盒子与盒子，顺时针设置，若没有设置则按其对称来

border：边框线

padding：内边距，盒子与内容


盒子模型就是我们常用的盒子，现实生活中它既有自己的边框厚度，有与里面物体的间隔，也有盒子本身与外界的距离。


小结：


CSS层叠样式就是多种样式叠加到一起，共同作用于该标签，无论是选择器的使用，还是属性设置以及盒子模型的运用，根本都是为了改变HTML页面的样式，多种力量作用产生美观页面的效果

萌萌小么么
关注
用于设置html外观显示样式,CSS通常称为CSS样式表或（ ）（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观...
weixin_39588206的博客
06-23 552
摘要：为C文本外形室内空气品质评价一般采用：()结合的手段进行。目前的气流组织的评价方法标准主要有五种，表或表边框边距布局不均匀系数、空气年龄、换气效率、排污效率、能量利用系数。反映吸附炭吸附性能的的指标主要为吸附容量、联及版滞留时间、使用寿命和选择性。...为C文本外形室内空气品质评价一般采用：()结合的手段进行。数值求解法具有成本低、样式样式用于页面样式速度快、应用范围广、提供信息全面、对湍流...
html用什么设置内容外观,【 】用于设置 HTML 页面中的内容外观显示样式。_学小易找答案...
weixin_29323273的博客
06-21 437
【判断题】“玉、堂、春、富、贵”中的“玉、堂”指的是紫玉兰和海棠这二种植物。【判断题】目前,我国公共危机管理已经很完善了。【单选题】( )代表着未来主体税种选择与发展的必然趋势。【单选题】下列哪种类型的胶印机可以不需要压印滚筒( )。【多选题】关于OTL电路,下列说法正确的是( )。【单选题】对于 avant 的用法使用错误的是:【单选题】长期留置导尿的病人需要定期更换导尿管的目的是( )...
网页的外观---CSS层叠样式表---01
博客首页
01-18 725
一.CSS简介 CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。HTML、CSS和JavaScript是前端技术中最核心的三个元素。其中： HTML控制网页的框架结构 CSS控制网页的外观 JavaScript控制网页的行为。 二.CSS的引入方法 css的引入方法有四种： 1.行内样式 <html> <head> <meta charset="utf-8"> <title></tit
html a4页面样式_CSS样式使用规则与描述
weixin_39788051的博客
11-29 1041
一：CSS的描述1、CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、 对其方式等)2、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式3、CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服4、CSS+DIV布局更佳灵活，更 容易绘制出用户需要的结构二:CSS样式使用规则1、使用HTML时，需要遵从一定的规范，CSS也是如此有一定...
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-variables-prefixer:PostCSS 插件为所有 css 自定义属性添加前缀
08-04
postcss-变量-前缀 PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 ： 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer ： npm install postcss postcss-cli postcss-...
7-在html使用css设置样式
ajream的博客
08-04 580
css css定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，可以提高工作效率 。 样式存储在样式表中，通常放在、<head>部分或存储在 外部CSS文件中 html中使用css CSS 可以通过以下方式添加到HTML中: 内联样式： 在HTML元素中使用"<style>" 属性 <!DOCTYPE html> <html> <body style="background-color:yello
如何给你的标签添加样式 ?怎么选择你要添加样式的标签 css 选择器
weixin_45810135的博客
10-03 2296
根据W3C定义CSS3 选择器： 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 基础选择器 层次选择器 伪类选择器 伪元素选择器 属性选择器 【基础选择器】 元素选择器（选择元素名） \ 如：p{color:red;} ID选择器（#号+ID名）\ 如：#csdn{color:black;} 类选择器（.+class名） \ 如：.csdn{color:blue;} 通配符选择器（选择全部元素，不建议使用）\如：* {color：green} 并集选择器/组合选择器（多个不同的标.
“高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
柳婼 の blog
07-02 3159
“高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
html页面的内容外观显示样式,XHTML CSS制作样式风格切换的WEB站点
weixin_39617044的博客
06-04 447
XHTML CSS制作样式风格切换的WEB站点互联网 发布时间：2008-10-17 19:26:50 作者：佚名 我要评论随着XHTML的逐渐推广流行，HTML在许多场合已经显得过时。WorldWideWebConsortium(W3C)于2000年6月26日发布了XHTML的第一个版本作为推荐标准。XHTML标准的目标是取代html。按照W3C的说法，“XHTML是html的继承...
给p标签加了css样式没有效果？
microcosmv的博客
10-05 7892
错误代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p｛ color: green; font-size:32px; ｝ </style> <
页面html标签没有渲染样式,CSS用于渲染HTML元素标签的样式
weixin_35210775的博客
06-04 295
如何使用CSSCSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.CSS 可以通过以下方式添加到HTML中:内联样式- 在HTML元素中使用"style"属性内部样式表 -在HTML文档头部 区域使用元素来包含CSS外部引用 - 使用外部 CSS文件最好的方式是通过外部引用CSS文件.在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得...
css 文本内容显示样式
if_you_can_please_do的博客
08-11 870
超出宽度不换行,超出部分显示… white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出宽度自动换行 white-space: normal; word-break: break-all; 样式效果图 html代码 &lt;!DOCTYPE html&gt; &lt;...
HTML（5）常用的格式标签
weixin_30644369的博客
08-02 278
一、基本文字格式 1.标题<h></h>　　HTML定义<h1></h1>到<h6></h6>六个<h>标签，分别用来不同大小字体的标题（Heading）。字体由大到小，<h1>最大，<h6>则最小。　　　　　　　　Heading标签需要注意的是：a.浏览器会自动地在标题的前后添加空行...
html基础内容样式
Mr. 亮先生的博客
08-24 777
head 编码格式：让浏览器可以识别中文 作者 关键字：用户搜索的时候可以通过关键字搜索到该网页 网站的描述信息 body h1~h6:标题标签，重要性依次递减，字体默认加粗，一般作为文章的标题使用 p标签：段落标签 换行标签 &nbsp； 牛逼的空格 水平线 < > > " " 引用别人一段话 强调文本为重要文本，字体加粗
CSS编程完全参考手册
资源摘要信息:"CSS完全参考手册.chm是一个包含了大量关于CSS(层叠样式表)信息的电子文档。CSS是一种用于控制网页表现和布局的样式表语言。它由W3C制定标准，是网页设计和开发中不可或缺的一部分。CSS完全参考手册....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值