網站導航

zblogPHP模板zbpkf
zblog免費模板zblogfree
zblog模板學習zblogxuexi
zblogPHP仿站zbpfang

僅在指定的div類上應用ioslides_presentation中特定于幻燈片的CSS

我想使用rmarkdown和ioslides創建一個html演示文稿。

一些主幻燈片應該包括圖像，并且它們的標題不應該與圖像重疊。

我試圖使用www/cust.css文件中指定的css ID(或類)來影響它們的布局。

降價:

---
title: "TITLE"
subtitle: "subtitle"
output:
   ioslides_presentation:
    css: www/cust.css
---

# Main 0

## sub

# Main 1 {.cust-1 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 3 {#cust-3 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

鋼性鑄鐵

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

.cust-1 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}


.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

#cust-3 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

#cust-4 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;breaker.s
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

<style>
div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;

然而，我面臨的問題是我不能通過{ }來影響h2頭類。cust-x}或{#cust-x}語法。

它或者影響圖像和字幕:

enter image description here

或者，如果我像這樣使用H2:

.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

它沒有任何影響。

enter image description here

通常這些降價的一級標題幻燈片使用的是這個css:

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

但是我不能改變這個類，因為它會干擾標題頁等等。

編輯語法:{}如果我嘗試將其他html對象作為目標，例如使用以下css樣式，效果會很好:

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}

給我的例子1和三個應用它的圓角圖像。

enter image description here

如你所知。cust-1 h2 {}沒有瞄準您想要的方向。這是因為HTML結構和你想象的不一樣。

你怎么知道如何瞄準你想要的元素？第一步:在RStudio中點擊Knit to HTML (ioslides)

步驟2:單擊在瀏覽器中打開

Screenshot 1

步驟3:使用開發工具(即在瀏覽器中按F12鍵)

您可以看到HTML結構如下:

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

截圖:

Screenshot 2

解決方案1 例如，要將& lth2 & gt在第四張幻燈片(即Main 1)中，使用以下CSS:

/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  /* Your CSS */
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  /* Your CSS */
}

查看我的-演示文稿。Rmd和styles.css獲得完整的解決方案。

我的-演講。中矢狀直徑之比

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

# Main 1 {.cust-1}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 3 {#cust-3}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

樣式. css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

/**************** Slide 4 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  color: blue;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 5 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='5'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='5'] h2 {
  color: red;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 6 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='6'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='6'] h2 {
  color: green;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 7 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='7'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='7'] h2 {
  color: purple;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

編輯

我上面寫的你沒看懂。我盡量簡化。

如果你寫:

# Main 1 {.cust-1}

HTML結構如下所示:

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

也就是說，您不能對& lth2 & gt你想的方式(即，用下面的CSS:。cust-1 h2 {})，因為它不是& lt文章& gt與class = & quotcust-1"。參見解決方案1。

但是如果你真的想設計& lth2 & gt用一個類，然后看解決方案2。

解決方案2 您可以向& lth2 & gt像這樣:

<h2 class="main-1">Main 1</h2>

查看我的-演示文稿。Rmd和styles.css獲得完整的解決方案。

我的-演講。中矢狀直徑之比

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-1">Main 1</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-2">Main 2</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-3">Main 3</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-4">Main 4</h2>

樣式. css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

h2.main-1,
h2.main-2,
h2.main-3,
h2.main-4 {
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
}

/**************** Main 1 ****************/
h2.main-1 {
  color: blue;
}

/**************** Main 2 ****************/
h2.main-2 {
  color: red;
}

/**************** Main 3 ****************/
h2.main-3 {
  color: green;
}

/**************** Main 4 ****************/
h2.main-4 {
  color: purple;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

輸出 Screenshot 3