草庐IT

前端(二)-CSS

xiaoqigui 2023-03-28 原文

1、样式

1.1 行内样式

<h1 style="color:red;">行内样式</h1>

1.2 内部样式

CSS代码写在 <head> 的 <style> 标签中
<style>
	h1{color: green; }
</style>

1.3 外部样式

<link rel="stylesheet" href="css/style01.css" type="text/css"/>
<!--
外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径，type="text/css"可以省略;
-->

1.4 CSS优先级

  • 就近原则;

2、选择器

2.1 基本选择器

2.1.1 标签选择器

<!--
选择器，基本作用是用于定位网页中的元素，进行样式美化，选取的是一组元素，不是一定是单个；
标签选择器，语法：标签名{声明1：声明2...}
-->/
h2{
	color: #FF0000;
}

2.1.2 类选择器

<!--类选择器，语法：标签的class属性值{声明1：声明2...} -->
.author{
	color: #00FF00;
}

2.1.3 id选择器

<!-- id选择器 语法：标签的id属性值{声明1：声明2...} -->
#conent{
color: #0000FF;
}

2.1.4 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

2.2 高级选择器

2.2.1 层次选择器

选择器 类型
E F 后代选择器
E>F 子选择器
E~F 通用兄弟选择器
E+F 相邻兄弟选择器

2.2.2 结构伪类选择器

结构伪类选择器 功能描述
E:first-child 父元素的第一个子元素
E:last-child 父元素的最后一个子元素
E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd)
E:first-of-tyope 父元素指定类型的第一个子元素
E:last-of-type 父元素指定类型的最后一个子元素
E F:nth-of-type(n) 父元素指定类型的第nth的子元素

2.2.3 属性选择器

属性选择器 功能描述
E[attr] 选择具有属性attr的元素
E[attr=val] 选择具有属性attr的元素，且属性值为val的元素
E[attr^=val] 选择具有属性attr的元素，且属性值以val开头的元素
E[attr$=val] 选择具有属性attr的元素，且属性值以val结尾的元素
E[attr*val] 选择具有属性attr的元素，且属性值中包含val的元素

3、美化网页元素

3.1 dispaly 行内元素与块元素的切换

属性 说明
display:block 将元素显示为块元素，前后有换行符
display:inline 将元素显示为内联(行内)元素，前后没有换行符
display:inlineblock 将元素显示为行内块元素
display:none 将元素隐藏

3.2 字体样式

属性 说明
font-family 设置字体类型(字体)
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体粗细
font 设置字体的所有属性（字体风格→字体粗细→字体大小→字体类型）

字体的粗细

值 说明
normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗体字体
lighter 更细体字体
100,200,300,400,500,600,700,800,900 定义由细到粗的字体400等于normal,700等于bold

3.3 文本样式

属性 说明
color 文本颜色
text-align 元素水平对其方式
text-indent 首行文本的缩进
line-heighr 文本的行高
text-decoration 文本的装饰

3.3.1 color

  • RGB
  • RGBA

3.3.2 text-align

元素水平对其方式

值 说明
left 把文本排列到左边
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果

3.3.3 text-indent

  • 首行缩进：text-indent：em或px；

3.3.4 line-heighr

  • 行高：line-height：px；

3.3.5 text-decoration

值 说明
none 去除默认样式
underline 下划线
overline 上划线
line-through 删除线

3.3.6 vertical-align 垂直对其方式

常用图片与文字垂直对其；

值 说明
middle 垂直居中
top 顶部
bottom 底部 
<!-- 图片与文字居中 -->
img,span{
	vertical-align: middle;
}

3.4 文本阴影

<!-- text-shadow:颜色 x轴 y轴 阴影半径  -->
text-shadow:color x-offset v-offset blur-radlus

3.5 超链接伪类

伪类名称 说明
a:link 未点击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:avtive 鼠标单机未释放的超链接样式
  • 设置伪类的顺序：alink->a:visited->a:hover->a:active;

3.6 列表样式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
值 说明
none 清除默认样式
disc 实心圆
circle 空心圆
square 实行正方形
decimal 数字
  • list-style:none;常用于去除无序列表的小黑点

3.7 背景样式

2.7.1 常见背景样式

  • 背景图片，background-image
  • 背景颜色，background-color

2.7.2 设置背景图像

2.7.2.1 background-Image属性
  • background-image:url(图片路径);
2.7.3.2 background-repeat属性
值 说明
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平铺
2.7.3.3 background-position属性
值 说明
Xpos Ypos 单位px
X% Y% 使用百分比
X,Y方向关键词 left,center,right,top,center,bootom
2.7.3.4 简写
  • background: 背景颜色 背景图像 背景定位 背景不重复显示；
2.7.4.4 background-size
值 说明
auto 保持原样
percentage 百分比
cover 放大填充整个元素
contain 保持比例，缩小到正好可以放

3.8 CSS渐变样式

  • background-image:linear-gradient(position,color1 color2...) posotion:渐变方向(可以时任意角度，向上的0deg)

4、盒子模型

4.1 盒子模型元素

元素 说明
margin 外边距
border 边框
padding 内边距
height 高
width 宽

4.2 边框

4.2.1 border-color

边框颜色；

属性 说明
border-top-color 上边框
border-right-color 右边框
border-bottom-color 下边框
border-left-color 左边框
border-color 上 右 下 左

4.2.2 border-width

边框粗细；

  • border-width-上 右 下 左

4.2.3 border-style

边框样式；

  • border-style-上 右 下 左
值 说明
none 清除默认样式
dotted 点线
dashed 破折线
double 双实线

4.2.4 简写

  • border:粗细 样式 颜色；

4.2.5 border-collapse

border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

属性值 说明
border-collapse:collapse 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
border-collapse:separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
border-collapse:inherit 规定应该从父元素继承 border-collapse 属性的值。

设置表格单元格边框的方法

直接设置表格table属性：cellspacing="0"
CSS方法1：border-collapse: collapse; 边框会合并为一个单一的边框；
CSS方法2：border-spacing:0; 表格的相邻单元格边框之间的距离为0

4.2.6 border-spacing

border-spacing是CSS2的一个属性。其作用是规定表格的相邻单元格边框之间的距离。如果表格的border-collapse属性值为collapse时，border-spacing设置无效。

border-spacing:h-length v-length;

h-length即单元格之间的水平距离；

v-length即单元格之间的垂直距离。

4.3 内外边框

4.3.1 margin 外边距

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

4.3.2 外边距妙用

  • 外边距妙用，网页居中对齐：margin:0px auto;

  • 网页居中对齐条件：1.块元素 2.固定宽度

4.3.3 padding 内边距

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom

4.4 圆角边框

  • border-radius: 左上 右上 右下 左下

4.5 盒子阴影

  • box-shadow:shadowtype x-offset y-offset blur-radus color;

    shadowtypetype:阴影类型(默认外阴影，inset内阴影)；

5、浮动

5.1 display属性

值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既有内联元素的特性，又有块元素的特性
none 元素隐藏

5.2 浮动

  • float属性
值 说明
left 元素向左浮动
right 元素向右浮动
none 不浮动

5.3 清除浮动

  • clear属性
值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧不允许浮动元素
none 允许

5.4 解决父级边框塌陷的方法

5.4.1 添加空div,并清除两边浮动

5.4.2 设置父元素的高度(灵活性差)

5.4.3 添加overflow属性(溢出处理)

属性值 说明
visible 默认值，内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其他剩余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其他剩余内容

5.4.4 父级添加伪类after

<div id="father" class="clear">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    <div class="layer04">浮动的盒子……</div>
</div>
    .clear:after{
    content: ''; <!--在clear类后面添加内容为空-->
    display: block; <!--把添加的内容转化为块元素-->
    clear: both; <!--清除这个元素两边的浮动-->
}

6、定位 posotion属性

6.1 relative 相对定位

  • 相对自身原来位置进行偏移，偏移设置：top、left、right、bottom;

  • 相对定位的规律

    1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 ；

    2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 ；

    3.设置相对定位的盒子原来的位置会被保留下来；

    4.浮动后，相对定位，相对于盒子浮动后的位置，进行定位，盒子原始位置不会保留；

6.2 absolute 绝对定位

  • absolute属性值：偏移设置： left、right、top、bottom；

  • 绝对定位的规律

    1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 ；

    2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 ；

    3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 ；

    4.元素位置发生偏移后，它原来的位置不会被保留下来；

    5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位；

  • 使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景；

6.3 fixed 固定定位

  • 偏移设置： left、right、top、bottom；

  • 类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；

  • 使用场景：在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等；

6.4 z-index属性

  • 调整元素定位时重叠层的上下位置 ；

    1.z-index属性值：整数，默认值为0 ；

    2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系 ；

    3.z-index值大的层位于其值小的层上方；

7、动画

7.1 变形 transform

函数 说明
translate() 平移函数，基于X、Y坐标重新定位元素的位置
scale() 缩放函数，可以使任意元素对象尺寸发生变化
rotate() 旋转函数，取值是一个度数值
skew() 倾斜函数，取值是一个度数值

translate（） 平移 px

transform:translate（x,y） 同时向x,y轴偏移
transform:translateX（x） 只向x轴偏移
transform:translateY（y） 只向y轴偏移

scale() 缩放 直接写倍数

transform:scale(缩放倍数) 同时向x,y轴缩放，中心放大
transform:scaleX(缩放倍数) 只向x轴缩放，水平拉伸
transform:scaleY(缩放倍数) 只向y轴缩放，垂直拉伸

rotate() 旋转 deg

transform:rotate(旋转角度deg) 相对原来的位置顺时针旋转
transform:rotateX(旋转角度deg) 相横坐标顺时针旋转
transform:rotateY(旋转角度deg) 相对原来的位置顺时针旋转

skew() 倾斜 deg

transform:skew(ax,ay) 倾斜调度deg
transform:skew(ax) 只设置x轴的倾斜
transform:skew(ay) 只设置y轴的倾斜

7.2 过度 transition

transition:[transition-property transition-duration transition-timing-function transition-delay]
transition-property 过度或动态模拟css属性
transition-duration 完成过度所需要时间
transition-timing-function 指定过度函数
transition-delay 过度开始出现的延迟时间

7.2.1 过渡属性（ transition-property ）

  • 定义转换动画的CSS属性名称

    1.IDENT：指定的CSS属性（width、height、background-color属性等） ；

    2.all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用al；

7.2.2 过渡所需的时间（ transition-duration ）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）；

7.2.3 过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画 的快慢方式；

  • ease：速度由快到慢（默认值） ；
  • linear：速度恒速（匀速运动） ；
  • ease-in：速度越来越快（渐显效果） ；
  • ease-out：速度越来越慢（渐隐效果）；
  • ease-in-out：速度先加速再减速（渐显渐隐效果）；

7.2.4 过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果 ；

  • 正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发 ；
  • 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ；
  • 0：默认值，元素过渡效果立即执行；

7.3 过度的触发机制

1.伪类触发

  • ：hover 鼠标悬停和划过时的显示效果
  • ：active 控制按钮被点击时的显示效果
  • ：focus 获得聚焦对象的元素
  • ：checked 选中

2.媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发：

3.用JavaScript脚本触发

特殊用法

<!-- 
在进行伪类触发后还可以对指定标签操作；点击li的时候还可以改变span的背景色；
<li><span>1</span>  雅诗兰黛即时修护眼部精华霜15ml</li>
-->
ul li:hover>span {
    background-color: aqua;
    border-color: aqua;
}

7.3 动画

8、项目经常使用的几个属性

项目新用属性

width: auto； 宽度自适应,可以决绝窗口缩放展示错乱(用在头部导航栏等)
border: 0px none; 剔除边框(常用去掉input的边框)
outline: none; 去除选中文本框的样式(常用去掉，点击输入框时的边框变蓝)
cursor: pointer; 光标移入变成手(常用作按钮的属性)
CSS前端tdtrtableHtml/Css

有关前端(二)-CSS的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  7. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  10. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

随机推荐